HTML表格表現怪異

所以我一直坐在這個HTML表格上一段時間，但不能讓文本對齊。 this is how it looks但所有的文本應該對齊。我真的不明白。下面HTML表格表現怪異

<table> 
 
<tbody> 
 
<tr> 
 
<td><img class="alignnone size-medium wp-image-354" src="http://www.yoganow.nl/wp-content/uploads/2016/11/MG_2007a-4.1.jpg" alt="" width="180" height="97" /></td> 
 
<td><img class="alignnone size-medium wp-image-354" src="http://www.yoganow.nl/wp-content/uploads/2016/11/MG_2240a-46.1.jpg" alt="" width="180" height="97" /></td> 
 
<td><img class="alignnone size-medium wp-image-354" src="http://www.yoganow.nl/wp-content/uploads/2017/02/admin-ajax-300x151.jpeg" alt="" width="180" height="97" /></td> 
 
</tr> 
 
<tr> 
 
<td>Yoga voor kinderen: Speels, uitdagend en in balans.</td> 
 
<td> Yoga voor tieners is voor iedereen tussen de 12 en 16 jaar. Vol uitdaging.</td> 
 
<td>Yoga zorgt voor evenwichtig leven.</td> 
 
</tr> 
 
</tbody> 
 
</table>

由於

表代碼預先

來源

2017-02-19 Michael de Borst

默認情況下，文本單元是垂直對齊的中間。

如果你想這一切頂端對齊，將它添加到您的CSS：

td {vertical-align:top;}

來源

2017-02-19 14:29:21 jao

據我的理解，他想使文字不超過圖像的左右極限。 – Banzay

它需要限制與圖像的尺寸文本。如果圖像寬度爲180px，則需要在span中包含文本並將寬度定義爲span。還爲td設置text-align: center以使跨度文本和圖像在垂直方向上對齊。

td { 
 
    text-align: center; 
 
    padding: 0 10px; 
 
} 
 
span { 
 
    display: inline-block; 
 
    width: 180px; 
 
    text-align: justify; 
 
    font-size: 22px; 
 
}

<table> 
 
<tbody> 
 
<tr> 
 
<td><img class="alignnone size-medium wp-image-354" src="http://www.yoganow.nl/wp-content/uploads/2016/11/MG_2007a-4.1.jpg" alt="" width="180" height="97" /></td> 
 
<td><img class="alignnone size-medium wp-image-354" src="http://www.yoganow.nl/wp-content/uploads/2016/11/MG_2240a-46.1.jpg" alt="" width="180" height="97" /></td> 
 
<td><img class="alignnone size-medium wp-image-354" src="http://www.yoganow.nl/wp-content/uploads/2017/02/admin-ajax-300x151.jpeg" alt="" width="180" height="97" /></td> 
 
</tr> 
 
<tr> 
 
<td><span>Yoga voor kinderen: Speels, uitdagend en in balans.</span></td> 
 
<td><span>Yoga voor tieners is voor iedereen tussen de 12 en 16 jaar. Vol uitdaging.</span></td> 
 
<td><span>Yoga zorgt voor evenwichtig leven.</span></td> 
 
</tr> 
 
</tbody> 
 
</table>

來源

2017-02-19 14:41:13 Banzay

HTML表格表現怪異

回答

相關問題