如何对齐网站页脚上的项目答案

【问题标题】：How can I align items on my website footer如何对齐网站页脚上的项目
【发布时间】：2013-08-20 00:05:01
【问题描述】：

我正在网站 www.albafitness.com 上工作

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

【问题讨论】：

这不是您应该使用该网站的方式；您应该发布您尝试过的内容以及您正在尝试的内容以及遇到的错误，然后每个人都会帮助您。

标签： html css wordpress web footer

【解决方案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.
}

【讨论】：

【解决方案2】：

要定位某物，您拥有三个超能力： 1. 绝对位置 2. 垂直对齐 3. 浮动

这次我们使用的是 no。 1 CSS：

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

HTML：

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

【讨论】：

【解决方案3】：

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

.footer_menu {margin-top: -21px}

但是当您缩小到移动尺寸时，您需要将其删除，这将是一个媒体查询。所以它们不会重叠

【讨论】：