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，则可以使用工具 - ＆gt;快速查看此操作。 Web开发人员 - ＆gt;检查页面上的检查器，然后点击其中包含文字的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>

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

希望这有帮助

对齐表格内容

3 个答案: