1

我想在表格左侧放置一个单选按钮（或任何其他元素），但让按钮垂直居中。如果我知道这些表都将是相同的大小，我可以使用相对定位。但是，我不知道这一点。这个 jsfiddle接近我需要的，但是，左 div 需要具有相同的高度（用于垂直对齐），并且它还需要位于边距中。这个jsfiddle更接近我正在寻找的东西，但似乎有点 hacky 并且不允许不同高度的表格。我可以使用没有 javascript 的 HTML/CSS 来完成这项工作吗？

这是我正在查看用于完成此操作的 HTML：

<div class="item">
    <div class="one"><input type="radio" name="group"/></div>
    <div class="two">
    <table>
        <tr><td>Data</td><td>More Data</td></tr>
        <tr><td>another</td><td>row</td></tr>
        <tr><td>of ...</td><td>you guessed it</td></tr>
        <tr><td>just</td><td>more data</td></tr>
    </table>
    </div>
</div>

和 CSS：

table {border-collapse:collapse;width:100%;}
td {border:1px solid black;padding:10px;}
.item {margin:10px; padding:10px; background:red;}
.two {background:blue;}

/* customization */
.one {background:yellow;text-align:center;width:20px;display:table-cell;vertical-align:middle;}
.two {margin-left:20px;}

/* hacky */
.one {height:50px;position:relative;top:55px;}
.two {margin-top:-50px;}
4

1 回答 1

1

垂直对齐仅适用于表格单元格内或内联元素之间。因此，要么使用具有一行和两个单元格的表格，.one要么.two使用 CSS 将 div 转换为表格单元格：

.one, .two {display:table-cell;}

Demo （只在firefox中测试过，没有安装其他浏览器，希望能用）

于 2013-01-24T06:04:25.333 回答