How to vertically align text on the right of a table to the middle of the table?

问题

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.

回答1:

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/

回答2:

This is aligned properly in IE8

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

回答3:

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

This looks to be working. Try this: http://jsfiddle.net/Cg9jy/1/

回答4:

Thanks to Sreenath Soman's idea, I increased the padding in the p element, and I used a negative margin-top to move the whole table upwards. If it wasn't for the padding, half the table would have disappeared. So that's what the padding was for.

来源：https://stackoverflow.com/questions/12121011/how-to-vertically-align-text-on-the-right-of-a-table-to-the-middle-of-the-table