Question

我尝试搜索此内容，但似乎找不到我的特定问题或解决方案。

在我正在处理的网站的页脚小部件区域中，我无法使它们水平对齐。

这是我的测试站点，我什至不确定在这里共享什么代码。 http://test.likeabirdblog.com

在小部件中，我希望“下一个版本”的顶部和搜索栏与中间的新闻小部件对齐。我在代码中有text-align：center，这是我发现的最常见的建议，但是它不起作用。

Answer 1

将此代码添加到您的CSS：

#footerwidget .widget-area { vertical-align : top ; }

这将使所有三个.widget-area都停留在页脚栏的顶部。

中间小部件的上方有一个额外的段落，位于蓝色框上方，这使得蓝色框显得较低...摆脱该段落元素，然后在{{1} }。

#footerwidget

然后，所有三个框的顶部将对齐。

Answer 2

您可以使用以下CSS：

#footerwidget {
    display: flex;
    justify-content: center;
    align-content: flex-start;
    padding-top: 5px;
}
#footmiddle > ul > li > div > p {
    display: none;
}
#footright > div > form {
    margin-top: 2px;
}
#footleft {
    margin-top: -3px;
}
#footmiddle .newsletter-cont {
    max-height: 176px;
}

Answer 3

您有一堆不必要的CSS，这使得样式保持一致变得更加困难。这是您应该删除（-）和添加（+）的内容：

#footleft {
- max-width: 400px;
- width: 100%;
- height: auto;
- display: inline-block;
- text-align: center;
}
#footmiddle {
- max-width: 400px;
- width: 100%;
- height: auto;
- display: inline-block;
- text-align: center;
}
#footright {
- max-width: 400px;
- width: 100%;
- height: auto;
- display: inline-block;
- text-align: center;
}
#footerwidget {
- height: auto;
- width: 100%;
- float: left;
- overflow: hidden;
- background-color: #a1025f;
+ display: flex;
+ max-width: 1100px; // or whatever you need
}
.newsletter-cont {
- margin: 2px;
}
.form-wrapper-2 {
- margin: 25px auto;
+ margin: 0 auto;
}
2c-r.css
#footer {
+ background-color: #a1025f;

您还希望在其中删除几个空的<p>标签，这些标签在表单顶部添加空白

页脚中的小部件无法正确对齐

3 个答案: