对齐表格内容

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开发人员 - > Inspector在您的页面上点击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> 

你应该尽量避免使用表格布局你的页面，并使用它们，以及表格数据。

希望这会有所帮助