我使用这个非常有用的Stack Overflow Link创建了一个'内联'表,看起来像一个分数。它的图片如下:
现在一切正常,但看看当它旁边的内容被放入时会发生什么:
加号与表格的顶部对齐。所以我想知道,有没有办法将它对齐到桌子中间(靠近中间线或中线)?
编辑:由于用户请求,这是我的表格的代码以及加号:
<table style="border-collapse: collapse; width: auto; float: left; margin: 2px;">
<tbody>
<tr><td style="text-align: center;padding: 5px; border-bottom: 1px solid black;">3</td></tr>
<tr><td style="text-align: center; padding: 5px;">5</td></tr>
</tbody>
</table>
+
此外,以上所有代码都放在p元素中。
答案 0 :(得分:3)
为什么要使用表格?我认为这更好:
HTML:
<span class="fraction">
<span>5</span>
<span>3</span>
</span>
+
<span class="fraction">
<span>1</span>
<span>2</span>
</span>
CSS:
.fraction{
display:inline-block;
vertical-align:middle;
}
.fraction>span{
display:block;
}
.fraction>span:first-child{
border-bottom:1px solid black;
}
请在此处查看:http://jsfiddle.net/7aQUP/
修改强>
您还可以添加填充,以便在分数中包含分数时增加条形:
.fraction>span{
padding:0 7px;
}
请在此处查看:http://jsfiddle.net/7aQUP/2/
答案 1 :(得分:2)
这在IE8中正确对齐
<table style="width: 250px;float: left;">
<tr>
<td>3+ </td> </tr> <tr>
<td>5</td> </tr> </table>
答案 2 :(得分:0)
<table style="border-collapse: collapse; width: auto; float: left; margin: 2px;">
<tbody>
<tr>
<td style="text-align: center;padding: 5px; border-bottom: 1px solid black;">3</td>
</tr>
<tr>
<td style="text-align: center; padding: 5px;">5</td>
</tr>
</tbody>
</table>
<table style="border-collapse: collapse; width: auto; float: left; margin: 2px;">
<tbody>
<tr>
<td style="text-align: center;padding-top: 20px;">+</td>
</tr>
</tbody>
</table>
这看起来很有效。试试这个:http://jsfiddle.net/Cg9jy/1/
答案 3 :(得分:0)
感谢Sreenath Soman的想法,我增加了p
元素中的填充,并使用负margin-top
向上移动整个表格。如果不是填充物,那么一半的桌子就会消失。这就是填充的用途。