Question

我正在www.albafitness.com

网站上工作

如您所见，社交媒体图标和页脚菜单不是水平对齐的。有人可以告诉我该怎么做吗？

Answer 1

为什么使用表格作为社交图标有什么特别的原因吗？对于这样的事情，建议使用ul标签。

试试这个CSS：

.footer_content {
    border-top: 1px solid #1F2024;
    clear: both;
    float: left;
    margin: 30px 30px 0;
    padding: 20px 0 0;
    width: 940px;
    text-align: center; // Align both elements horizontally
}

table.cnss-social-icon tr td, table.cnss-social-icon, table.cnss-social-icon tr {
    background: none repeat scroll 0 0 transparent !important;
    border: medium none !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
    display: inline-block; // inline-block will make it inherit rules from text-align rule
}

.footer_menu {
    padding: 10px 0;
    // float: right; //float will always pull your element to one side. This should be removed.
}

Answer 2

为了定位，你有三种超能力： 1.位置绝对 2.垂直对齐 3. FLOAT

这次我们没有使用。 1 CSS：

.footer_content_wrraper
{
    position:absolute;
    bottom:0;
}

HTML：

<div class="footer_content_wrapper">
....../
</div>

Answer 3

如果您需要保留相同的html，可以在菜单上使用负边距

.footer_menu {margin-top: -21px}

但是当您达到移动设备尺寸时，您将需要删除媒体查询。所以他们不重叠

如何在我的网站页脚上对齐项目

3 个答案: