對齊表格內容

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> 

你應該儘量避免使用表格佈局你的頁面，並使用它們，以及表格數據。

希望這會有所幫助