Виджеты в нижнем колонтитуле не будут правильно совмещены

Question

Я пытался найти это и не могу найти свою конкретную проблему или решение.

В области виджетов нижнего колонтитула сайта, над которым я работаю, я не могу их получитьдля выравнивания по горизонтали.

Вот мой тестовый сайт, я даже не уверен, какой код поделиться здесь.http://test.likeabirdblog.com

В виджетах я хочу, чтобы верхняя часть «следующего релиза» и строка поиска соответствовали виджету новостной рассылки в середине.У меня есть text-align: center в коде, который я нашел в качестве наиболее распространенного предложения, но он не работает.

Answer 1

Вы можете использовать этот 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 2

У вас есть куча ненужных 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>, которые добавляют пустое пространство сверхуформ

Answer 3

Добавьте этот код к вашему CSS:

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

Это заставит все три .widget-area s придерживаться верхней части нижнего колонтитула.

В середине есть дополнительный абзацВиджет, вверху, над синим квадратом, из-за которого синее поле выглядит ниже ... избавьтесь от этого элемента абзаца, а затем добавьте отступ в верхней части #footerwidget.

#footerwidget { padding-top : 20px ; }

Затем вершины всех трех ячеек выстроятся в ряд.