Как увеличить размер текста не изменяя размер его блока?

Question

[Daimar [X14006]]

Когда увеличиваю размер TEXT, увеличивается и высота navbar'a, тем самым текст что с права не фиксируется ровно по line-height
Как увеличить TEXT так чтобы он не увеличивал navbar?

Comments

[hellcaster]

Попробуйте через position: absolute

[hellcaster]

Или ещё лучше через flexbox

Answer 1

[Сергей delphinpro]

jsfiddle.net/ecpdg45k

Answer 2

[Nifontov]

Можно сделать так и ограничить ширину, но это не верно, так как лого будет за границами поля https://codepen.io/anon/pen/djGvxB как тут.

Вам нужно создать контейнер с position: relative
а в нем лого задать position: absolute, тогда он привяжется к этому блоку и будет выбит из потока, соответственно не будет влиять на размер других элементов.

Так же вы можете не ограничивать ширину.
А например задать ей минимальное значение ( 70 px ) например или 100.
дисплей флекс и центрировать по центру, в таком случае вы сможете увеличивать текст у лого до границ контейнера!

Answer 3

[Ольга Ветер]

Выставите тексту и остальным пунктам одинаковый line-height. Отлично решит проблему line-height = необходимой высоте блока, если там вот такие короткие пункты и переносов не предвидится. Если не используете normalize или reset убедитесь что там нет лишних margin/padding. При использовании flex выравнивание по центру по высоте не должно быть проблемой вообще.

Comments

[Daimar [X14006]]

я поставил line-height 10vh
но этот логотип увеличивает размер