如何將表格右側的文本垂直對齊到表格中間？

Question

我用這個非常有用的Stack Overflow Link創建了一個'inline'表格，看起來像一個分數。它的照片下面放：

現在一切工作正常，但看看我們接下來的內容時，恰好它被放置在：

加號贊同與桌子的頂部。所以我想知道，是否有辦法將它對齊到桌子中間（靠近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元素。

Answer 1

爲什麼使用表？我覺得這是更好的：

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/

編輯：

您還可以添加填充物爲了增加酒吧時間n您有內部分數分數：

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

見這裏：http://jsfiddle.net/7aQUP/2/

Answer 2

這在IE8

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

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

這看起來是工作的正確對齊。試試這個：http://jsfiddle.net/Cg9jy/1/

Answer 4

感謝Sreenath Soman的想法，我在p元素中增加了填充，我使用負數margin-top向上移動整個表格。如果不是填充，桌子的一半就會消失。所以這就是填充的目的。