Как полностью убрать все отступы у текста и выровнять его по вертикали?
html:
<div class="logo"> <a href="#" class="logo__link"> <div class="logo__text"> TEXT </div> </a> </div> |
<div class="logo"> <a href="#" class="logo__link"> <div class="logo__text"> TEXT </div> </a> </div>
scss:
logo { height: 2.5*$logo-text-size; display: flex; align-items: center; &__text { font-size: $logo-text-size; color: $primary-color; } &__link { display: block; &:link { text-decoration: none; color: $primary-color; } &:visited { color: black; } } } |
logo { height: 2.5*$logo-text-size; display: flex; align-items: center; &__text { font-size: $logo-text-size; color: $primary-color; } &__link { display: block; &:link { text-decoration: none; color: $primary-color; } &:visited { color: black; } } }
Уже все способы перепробовал, но почему-то у текста верхний и нижний отступы отличаются.
Дополнительно:
Сделай пример на codepen.
Исследую этот вопрос. Спасибо за подсказку!
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для полного удаления отступов и выравнивания текста по вертикали можно использовать CSS свойство `line-height`. Сначала установим отступы на ноль для всех элементов на странице, а затем установим `line-height` равным высоте контейнера, в котором находится текст.
Пример для HTML:
* { margin: 0; padding: 0; } .container { height: 100vh; /* задаем высоту контейнера равную высоте окна браузера */ display: flex; justify-content: center; align-items: center; } .text { line-height: 100vh; /* задаем высоту строки равную высоте контейнера */ } <div class="container"> <p class="text">Ваш текст здесь</p> </div>* { margin: 0; padding: 0; } .container { height: 100vh; /* задаем высоту контейнера равную высоте окна браузера */ display: flex; justify-content: center; align-items: center; } .text { line-height: 100vh; /* задаем высоту строки равную высоте контейнера */ } <div class="container"> <p class="text">Ваш текст здесь</p> </div>
Пример для CSS:
* { margin: 0; padding: 0; } .container { height: 100vh; /* задаем высоту контейнера равную высоте экрана */ display: flex; justify-content: center; align-items: center; } .text { line-height: 100vh; /* задаем высоту строки равную высоте контейнера */ }
Таким образом, установив `line-height` равным высоте контейнера, вы сможете полностью избавиться от отступов и выровнять текст по вертикали.