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

Issue

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.

Solution

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/

Answered By - Oriol

Answer Checked By - Katrina (PHPFixing Volunteer)