Вертикально центрировать текст в элементе

В настоящее время я пытаюсь центрировать текст в теге привязки меню навигации по вертикали с помощью CSS. Я пробовал несколько атрибутов CSS, таких как высота и верх с фиксированным положением и блоком отображения, но безрезультатно.

.mainav {
    position: fixed;
    top: 0;
    z-index: 3;
    width: 100%;
}

.mainav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #ffffff;
}

.mainav li {
	float: left;
    border-right: 1px solid #bbb;
}

.mainav li:last-child {
    border-right: none;
}

.mainav li a {
    height:35px;
    top: 20px;
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

<div class = "mainav">
    <ul>
        <li><a href = "/"><img src = "" alt = "Project Club Logo"></a></li>
        <li><a href = "/en/about">About</a></li>
        <li><a href = "/en/contact">Contact Us</a></li>
        <li><a href = "/en/pricing">Pricing</a></li>
        <li><a href = "/en/support">Support</a></li>
        <li><a href = "/en/login">Login</a></li>
        <li><a href = "/en/signup">Signup</a></li>
    </ul>
</div>

css alignment

30.05.2018 01:55

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

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

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Если вы хотите выровнять текст вертикально, вы можете сделать это так:

Работает, только если это одна строка:

.mainav li a {
    height:35px;
    top: 20px;
    display: block;
    color: black;
    text-align: center;
    padding: 0 16px;
    text-decoration: none;
    line-height: 35px;
}

Установите для свойства line-height одинаковую высоту и удалите заполнение (примечание: вы должны оставить правый и левый padding -или margin-, чтобы оставить немного места).

.mainav {
    position: fixed;
    top: 0;
    z-index: 3;
    width: 100%;
}
.mainav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #ffffff;
}

.mainav li {
	float: left;
    border-right: 1px solid #bbb;
}

.mainav li:last-child {
    border-right: none;
}

.mainav li a {
    height:35px;
    top: 20px;
    display: block;
    color: black;
    text-align: center;
    padding: 0 16px;
    text-decoration: none;
    line-height: 35px;
}

<div class = "mainav">
<ul>
  <li><a href = "/"><img src = "https://4424club.xyz.412quack.com/assets/images/logo.png" alt = "Project Club Logo"></a></li>
  <li><a href = "/en/about">About</a></li>
  <li><a href = "/en/contact">Contact Us</a></li>
  <li><a href = "/en/pricing">Pricing</a></li>
  <li><a href = "/en/support">Support</a></li>
  <li><a href = "/en/login">Login</a></li>
  <li><a href = "/en/signup">Signup</a></li>
</ul>
</div>

30.05.2018 02:03

Другие вопросы по теме

Как выровнять контекстное меню по правому нижнему краю?

Android: layout_gravity = "end" не работает при компиляции на реальном устройстве

Выравнивание строки рисования в C#

Как правильно выровнять <img> в теле карты Bootstrap 4?

Как правильно выровнять эти ссылки?

Как центрировать текст по вертикали и горизонтали во Flutter?

Проблема с выравниванием текста

Как выровнять текст в TextView, когда TextView имеет ограничение соответствия?

Как установить выравнивание (вправо или влево) текста в TextView программно

Строка заголовка не включает раскрывающийся список (CSS)

Вертикально центрировать текст в элементе

Ответы 1

Другие вопросы по теме

Похожие вопросы