对齐表格内容

Question

我有一个 Wordpress 网站，我正在尝试使用表格将一些文本与图像对齐。

由于某种原因，图片看起来比我网站上的文字高

非常感谢任何帮助。

页面在这里： http://pictureperfect.kpwebservices.net/about/

这是我的代码：

<table style="width: 86%;" border="0">
<tbody>
<tr>
<td width="50%"></td>
<td width="50%"></td>a
</tr>
<tr>
<td>Our aim is to ensure you look and feel your best on your special day. Whether it is your Wedding day, formal, Deb, Spring Carnival, photography and any occasion in between.

Picture Perfect Makeup is a mobile service catering Melbourne, surrounding and outer suburbs. We will come to your doorstep for your own comfort.

Mary Kechichian- Professional Makeup Artist and Stylist. Completed Training in Melbourne CBD with Elite Makeup Academy in advance Makeup artistry and Hair stylist.

Amongst my travels and learning Completed training in New York specialising in airbrushing, tattoo coverage with Kett Cosmetics.</td>
<td><img alt="" src="http://pictureperfect.kpwebservices.net/wp-content/uploads/2013/04/936482_507067716023365_1908922291_n.jpg" width="439" height="392" /></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>

Answer 1

您的文本具有 CSS 属性 vertical-align: baseline，这将导致其旁边的图像与第一行文本的底部对齐。

尝试将其更改为vertical-align: top。

如果您使用 Firefox，您可以通过使用页面上的工具 -> Web 开发人员 -> 检查器，然后单击包含文本的 td 来快速查看此操作。

Answer 2

您需要垂直对齐以确保无论您的高度增加多少，左侧块中的文本都保持在顶部。使用类似的东西：

<tr>
    <td style="vertical-align: top;">Our aim is to ensure you look and feel your best on your special day. Whether it is your;Wedding day, formal, Deb, SpringCarnival, photography and any occasion in between.<p></p>
<p>Picture Perfect Makeup is a mobile service catering Melbourne, surrounding and outer suburbs. We will come to your doorstep for your own comfort.</p>
<p>Mary Kechichian- Professional Makeup Artist and Stylist. Completed Training in Melbourne CBD with Elite Makeup Academy in advance Makeup artistry and Hair stylist.</p>
<p>Amongst my travels and learning Completed training in New York specialising in airbrushing, tattoo coverage with Kett Cosmetics.</p></td>
<td class="odd"><img alt="" src="http://pictureperfect.kpwebservices.net/wp-content/uploads/2013/04/936482_507067716023365_1908922291_n.jpg" width="439" height="392"></td>
</tr>

样式是内联的，但是您可以轻松地插入到一个类中并将该类指向该单元格。我还建议您在图像上设置边距或在图像所在的单元格中添加填充，使其看起来更加优雅。

Answer 3

尝试用这个替换表格：

<div style="width: 86%; position:relative; margin:0 auto;">


<div style="width:50%; float: left;">Our aim is to ensure you look and feel your best on your special day. Whether it is your;Wedding day, formal, Deb, SpringCarnival, photography and any occasion in between.</p>
<p>Picture Perfect Makeup is a mobile service catering Melbourne, surrounding and outer suburbs. We will come to your doorstep for your own comfort.</p>
<p>Mary Kechichian- Professional Makeup Artist and Stylist. Completed Training in Melbourne CBD with Elite Makeup Academy in advance Makeup artistry and Hair stylist.</p>
<p>Amongst my travels and learning Completed training in New York specialising in airbrushing, tattoo coverage with Kett Cosmetics.</div>

<div style="width:50%; float:right;"><img alt="" src="http://pictureperfect.kpwebservices.net/wp-content/uploads/2013/04/936482_507067716023365_1908922291_n.jpg" style="width:100%; max-width:439px; height: auto;" /></div>

</div>

您应该尽量避免使用表格来布局页面并将它们用于表格数据。

希望对你有帮助