在表格的2列中垂直對齊文本

我有一個2列的表格，每列有不同的字體大小（較大的字體也很強）。我的問題是文本的垂直對齊方式：它不垂直對齊（見圖片）：在表格的2列中垂直對齊文本

這裏是我的html代碼：

<html> 
<head> 
    <style> 
    .big-text-size { 
     font-size: 3.5em; 
    } 
    .small-text-size { 
     font-size: 1.1em; 
    } 
    </style> 
</head> 
<body> 
     <table> 
     <td class="big-text-size"> 
      <strong>My doctor's name</strong> 
     </td> 
     <td class="small-text-size"> Daniel Boro </td> 
     </table> 
</body> 
</html>

任何建議，爲什麼會發生？

來源

2015-10-27 Dror

請讓你的例子更加簡單：只保留那些必要的東西來重現問題。 – petermeissner

表應該用於表格數據僅供 - 沒有佈局 – Pete

@petermeissner：知道了，去掉不必要的代碼 – Dror

調整你的不同大小的文本的垂直對齊方式（see here）垂直對齊文本：

<html> 
<head><style> 
    .big-text-size { 
     font-size: 3.5em; 
     vertical-align: text-bottom; 
    } 
    .small-text-size { 
    font-size: 1.1em; 
    vertical-align: text-bottom; 
    } 
</style></head> 
<body> 
     <table> 
     <td class="big-text-size"> 
      <strong>My doctor's name</strong> 
     </td> 
     <td class="small-text-size"> Daniel Boro </td> 
     </table> 
</body> 
</html>

來源

2015-10-27 10:04:39 petermeissner

你的第二個表沒有任何行...

<table> 
    <tr> <!-- Missing --> 
     <td class="small-text-size">Daniel Boro</td> 
     <td class="big-text-size"><strong>My doctor's name</strong></td> 
    </tr> 
</table>

來源

2015-10-27 08:43:48

我插入標籤就像你說的，但它並沒有改變：看起來還是一樣 – Dror

你能做出的jsfiddle？ –

嘗試，包括在你的錶行..

你也可以訪問這個網站http://daker.me/2014/04/4-css-tricks-for-vertical-alignment.html它提供了4個CSS技巧，你可以使用表格單元格

來源

2015-10-27 08:46:14 Tanah

在表格的2列中垂直對齊文本

回答

相關問題