Question

所以我一直坐在这个HTML表上一段时间但是无法让文本对齐。 this is how it looks但所有文字都应该对齐。我真的不明白。

下面的表格代码

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

提前致谢

Answer 1

默认情况下，文本单元格与中间垂直对齐。

如果您希望它全部与顶部对齐，请将其添加到您的CSS：

td {vertical-align:top;}

Answer 2

需要限制带图像尺寸的文字。如果图像的宽度为180px，则需要在span中包含文本并将宽度180定义为跨度。同时为text-align: center设置td，以使跨文本和图像在垂直方向上对齐。

＆＃13;

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

＆＃13;

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

＆＃13;

HTML表格很奇怪

2 个答案: