在页脚小工具将无法正确对齐

Question

我试图寻找这一点，似乎无法找到我的具体问题或解决方案。

在网站上我工作的页脚小工具区域，我不能让他们水平对齐。

这里是我的测试现场，我甚至不能确定在这里分享什么样的代码。 http://test.likeabirdblog.com

在窗口小部件，我想“下一个版本”和搜索栏的顶部是在中间的通讯部件线。我的text-align：在代码中心，这是我所发现的最常见的建议，但它无法正常工作。

Answer 1

这个代码添加到你的CSS：

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

这将使所有三个.widget-areas坚持页脚栏的顶部。

还有一个额外的段落中间部件，在顶部，上面的蓝色框，这使得蓝框出现低...摆脱段落元素，然后添加填充到#footerwidget的顶部。

#footerwidget { padding-top : 20px ; }

然后，所有三个箱的顶部会排队。

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>标签上的表单顶部添加空格