Как верстать шапку сайта?

Question

[Михаил]

Всем привет! У меня такой вопрос. Надо сверстать шапку сайта, я сверстал, но что-то не знаю, как все-таки правильно надо. Там есть текст, есть кнопки. Верстаю на Бутстрапе. Как все это правильно выровнять по высоте? Чтобы было выравнивание по нижней границе текста ? если я ставлю класс align-items-center, то выравнивается как-то не так, все по центру, и получается текст на кнопках, который мельче , он как бы немного выше того текста, который сам по себе... В общем что-то я запутался... кто как думает ?

Comments

[Андрей Hecc]

align-items: baseline

[Rustam Bainazarov]

Боже, блин, ну ёлки.

Если вы пользуетесь этим Bootstrap'ом, то почему, как только что-то выходит за рамки его возможностей, всем будто бы чья-то могучая рука сверху отрезает крылья или ещё там чего-то, оставляя беспомощными перед простейшими штуками :))

Кто мешает сделать этот компонент без Bootstrap'а и его классов? Или даже с его классами.

Родителю и кнопкам:
display: flex;
align-items: center;
line-height: 1; /* опционально */

Кнопкам — задать либо высоту, либо padding, чтобы добиться нужной высоты.

[Rustam Bainazarov]

А-ля так:

[Михаил]

Рустам Байназаров, интересный вариант, попробуем

Answer 1

[Dmitriy]

Михаил, проще всего сделать данный блок флексом "display: flex", и выровнять все элементы в нем свойством "align-items: baseline". Вот тут хорошая шпаргалка по флекс-боксам.

Comments

[Михаил]

Спасибо! Да, скорее всего так и сделаем, и спасибо за ссылку.

[Ян]

Спасибо, теперь я тоже сделал тоже самое

Answer 2

[Виталий Кузнецов]

Можно попробовать задать line-height