使用AddThis的CSS定位

Question

我目前有一個表格「解決方案」來格式化AddThis Div按鈕。 你可以看到這個在：http://www.siding4u.com/save-on-siding.php

在頁面它的頂部正確地顯示：

下面是該代碼（變通）：我有

<table align="center" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
    <td width="60%" align="right"><img title="Help us. Help you." src="http://www.siding4u.com/media/shareaholic/img_help-us-help-you_right_yellow-text.png" alt="TEXT: Sharing is caring! Help us. Help you." width="360" height="23" /></td> 
    <td width="40%" align="left"><!-- AddThis Button BEGIN --> 
<div class="addthis_toolbox addthis_default_style"> 
<a class="addthis_button_preferred_1"></a> 
<a class="addthis_button_preferred_2"></a> 
<a class="addthis_button_preferred_3"></a> 
<a class="addthis_button_preferred_4"></a> 
<a class="addthis_button_compact"></a> 
<a class="addthis_counter addthis_bubble_style"></a> 
</div> 
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=siding4u"></script> 
<!-- AddThis Button END --></td> 
    </tr> 
</table> 

/想要將我所有的表格佈局轉換爲CSS，但我似乎無法獲得AddThis按鈕的配合。不管怎麼樣，他們總是看起來像「左邊的爭鬥」或者BREAK。

我猜這是一個簡單的解決方法，但我是那些CSS「塊頭」，似乎無法鞭打CSS的形狀之一。

請幫助...

Answer 1

在CSS對準圖像是根據自己的頁面，而不是他們的理由上的位置（與addthis_button_preferred_1...n類的元素也許應該控制此）在一個表，你證明它左/中/正確的等等，而用CSS你的目標是以它的子元素將在中間的方式對齊。

HTML：

<div id='wrapper'> <!-- parent div containing the help-us-help-you image and the buttons--> 
    <div id="help_us"><!-- float:left because we want the image div and the button dive to be besides eachother --> 
     <img title="Help us. Help you." src="http://www.siding4u.com/media/shareaholic/img_help-us-help-you_right_yellow-text.png" alt="TEXT: Sharing is caring! Help us. Help you." width="360" height="23"/> 
    </div> 
    <div id='buttons'><!-- this div should also be floated left and have padding, to align the buttons correctly --> 

     <!-- each of the link elements should get some padding --> 
     <a class="addthis_button_preferred_1 button_preferred"></a> 
     <a class="addthis_button_preferred_2 button_preferred"></a> 
     <a class="addthis_button_preferred_3 button_preferred"></a> 
     <a class="addthis_button_preferred_4 button_preferred"></a> 
     <a class="addthis_button_compact button_preferred"></a> 
     <a class="addthis_counter addthis_bubble_style button_preferred"></a> 
    </div> 
</div> 

整個例子是在線on this fiddle，而且會與對準幫助，是一個純CSS的解決方案，沒有表出現在所有！

p.s.作爲一個方面說明，我建議您使用jsfiddle來解決CSS/HTML/javascript問題，它的確幫助我們更好地瞭解問題，並使更改更快。

EDIT 對於第二個問題：

<div align="center" style="margin-bottom:0; margin-top:5px;"> 
<div id='wrapper'> 
... 
​</div> 
... 
</div> 

對於該元件的高度由於某種原因是48像素，這產生兩個元件之間的間隙。因此，應用高度它，改變：

style="margin-bottom:0; margin-top:5px;"

TO：

style="margin-bottom:0; margin-top:5px;height:23px;"