如何将表格右侧的文本垂直对齐表格的中间？答案

【问题标题】：How to vertically align text on the right of a table to the middle of the table?如何将表格右侧的文本垂直对齐表格的中间？
【发布时间】：2012-08-20 16:52:44
【问题描述】：

我使用这个非常有用的Stack Overflow Link 创建了一个“内联”表，看起来像一个分数。下面放一张图：

现在一切正常，但看看当它旁边的内容被放入时会发生什么：

加号与表格顶部对齐。所以我想知道，有没有办法将它对齐到桌子的中间（靠近 vinculum 或中线）？

编辑：由于用户要求，这是我的表格的代码，也是加号：

<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元素中。

【问题讨论】：

@SreenathSoman 你是什么意思？
发布产生上述结果的html代码

标签： html css html-table vertical-alignment

【解决方案1】：

这在 IE8 中正确对齐

<table style="width: 250px;float: left;">  
   <tr>        
 <td>3+ </td>     </tr>     <tr>       
  <td>5</td>     </tr> </table>

【讨论】：

我无法在元素中插入加号。它实际上在外面。
+号是否在表格元素之外？
我在使用 safari 时尝试了 jsfiddle，但似乎没有用。我想在 vinculum 附近加号。
这是您的代码在 jsfiddle 中的样子：jsfiddle.net/think123/v5TFC

【解决方案2】：

<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/

【讨论】：

不，我希望 + 号与表格垂直对齐，以便它出现在 vinculum 或线条附近。
很抱歉，我的加号是单独的，所以也许您想更改表格的 css 样式？

【解决方案3】：

感谢 Sreenath Soman 的想法，我增加了 p 元素中的填充，并使用负数 margin-top 将整个表格向上移动。如果没有填充，一半的桌子会消失。这就是填充的用途。

【讨论】：

【解决方案4】：

为什么要使用表格？我认为这样更好：

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/

【讨论】：