2

我目前有一个表格“解决方案”来格式化 AddThis Div 按钮。您可以在以下网址看到：http ://www.siding4u.com/save-on-siding.php

在页面顶部它正确显示： AddThis 按钮的格式设置在图像的右侧并在页面顶部偏移

这是代码（解决方法）：

<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 按钮配合。他们似乎总是“左对齐”或以某种方式中断 - 无论我尝试什么。

我猜这是一个简单的解决方法，但我是那些似乎无法将 CSS 鞭打成形状的 CSS“块头”之一。

请帮忙...

4

1 回答 1

3

在 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>

整个示例在这个小提琴上在线，希望有助于对齐，并且是一个纯 CSS 解决方案，根本没有表格！

ps 作为旁注，我建议您使用jsfiddle解决 CSS/HTML/javascript 问题，它确实可以帮助我们更好地查看问题，并更快地进行更改。

编辑 对于第二个问题：

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

对于这个元素，由于某种原因，高度为 48 px，这会在两个元素之间产生间隙。所以应用一个高度，改变：

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

到：

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

于 2012-07-14T00:15:36.663 回答