我已尝试搜索此内容，但似乎找不到我的具体问题或解决方案。
在我正在处理的网站的页脚小部件区域中，我无法让它们水平对齐。
这是我的测试站点，我什至不确定要在这里分享什么代码。 http://test.likeabirdblog.com
在小部件中，我希望“下一个版本”的顶部和搜索栏与中间的时事通讯小部件保持一致。我在代码中有 text-align:center 这是我发现的最常见的建议，但它不起作用。
【问题讨论】：
标签： css wordpress widget alignment footer
将此代码添加到您的 CSS：
#footerwidget .widget-area { vertical-align : top ; }
这将使所有三个.widget-areas 都粘在页脚栏的顶部。
中间的小部件有一个额外的段落，在顶部，在蓝色框的上方，这使得蓝色框看起来更低...去掉那个段落元素，然后在#footerwidget 的顶部添加填充。
#footerwidget { padding-top : 20px ; }
然后，所有三个盒子的顶部将对齐。
【讨论】：
你可以使用这个 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;
}
【讨论】：
你得到了一堆不必要的 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> 标记，这些标记会在表单顶部添加空格
【讨论】：