如何将表右边的文本垂直对齐到表的中间？ [英] How to vertically align text on the right of a table to the middle of the table?

问题描述

我使用此非常有用的

编辑 p>

您还可以添加填充，以便在分数中包含分数时增加栏：

  .fraction> span {
 padding：0 7px; 
} 
  

在这里查看： http://jsfiddle.net/7aQUP/2/

I have created an 'inline' table using this extremely useful Stack Overflow Link, made to look like a fraction. A picture of it is put below:

Now all works fine, but look at what happens when content next to it is placed in:

The plus sign aligns itself with the top of the table. So I was wondering, is there a way to align it to the middle of the table(near the vinculum or middle line)?

EDIT: Due to user requests, this is the code for my table and also the plus sign:

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

Also, all of the above code is placed in a p element.

解决方案

Why do you use tables? I think this is better:

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;
}

See it here: http://jsfiddle.net/7aQUP/

Edit:

You can also add padding in order to increase the bar when you have fractions inside fractions:

.fraction>span{
    padding:0 7px;
}

See it here: http://jsfiddle.net/7aQUP/2/

这篇关于如何将表右边的文本垂直对齐到表的中间？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！