Вертикальное выравнивание всех элементов в моем списке
У меня есть панель навигации, использующая элементы Ul и Li. У меня все оформлено так, как я хочу, кроме вертикального фактора. Я хочу, чтобы все элементы были центрированы по вертикали, но это не работает. Я попытался использовать вертикальное выравнивание: среднее; на элементах, но это ничего не сделало.
Вот мой код.
nav {
background-color: #4D0066;
width: 400px;
height: 60px;
border: 3px solid black;
border-radius: 5px 5px 35px 35px;
;
margin: 5px auto;
}
ul {
font-size: 0;
text-align: center;
}
li, li a:after {
display: inline-block;
vertical-align: middle;
}
li a:after {
content:'';
height: 100%;
}
a {
color: white;
text-decoration: none;
font-size: 15pt;
display: block;
padding: 0 10px;
}
.home {
width: 32px;
display: block;
vertical-align: middle;
}<nav>
<ul>
<li><a href = "#">Roster</a></li>
<li><a href = "#">News</a></li>
<li>
<a href = "#"><img src = "images/home.png" class = "home"></a>
</li>
<li><a href = "#">Arena</a></li>
<li><a href = "#">Leagues</a></li>
</ul>
</nav>
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
3
1
36
1
Ответы 1
Чтобы выровнять элементы li внутри ul. Вы должны установить display из ul на flex и применить либо align-items:center, либо align-items:baseline. Центр будет центрировать их по вертикали, базовая линия выровняет их друг с другом.
Установка height на 100% также гарантирует, что он займет все предоставленное пространство.
Подробнее о flexbox см.: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
nav {
background-color: #4D0066;
width: 400px;
height: 60px;
border: 3px solid black;
border-radius: 5px 5px 35px 35px;;
margin: 5px auto;
}
ul {
font-size: 0;
text-align: center;
display:flex;
align-items: center;
height: 100%;
}
li {
display: inline-block;
}
a {
color: white;
text-decoration: none;
font-size: 15pt;
display: block;
padding: 0 10px;
}
.home {
width: 32px;
display: block;
vertical-align: middle;
}<nav>
<ul>
<li><a href = "#">Roster</a></li>
<li><a href = "#">News</a></li>
<li><a href = "#"><img src = "images/home.png" class = "home"></a></li>
<li><a href = "#">Arena</a></li>
<li><a href = "#">Leagues</a></li>
</ul>
</nav>Другие вопросы по теме
Кнопка HTML/Javascript не работает в Safari (iPhone, macbook), но работает в других браузерах (Chrome и Samsung Internet)
Wordpress новая тема пользовательский шрифт otf
Может ли ширина родительского контейнера увеличиваться до масштабированного размера содержимого дочернего элемента?
Попытка равномерно распределить навигационную ссылку изображения с остальными текстовыми ссылками в навигации
Запретить пользовательскому курсору расширять страницу
Передача значения входного тега в тег кнопки поиска — ReactJS
Как добавить имя пользователя и пароль к возврату в JavaScript?
Как применить стили к элементу ввода [только для чтения] с примененными условиями Angular?
Проверьте компонент реакции, если имя стиля существует
Сложность использования Xpath/CSS при очистке
Похожие вопросы
Как я могу установить максимальную дату на 7-й день с сегодняшнего дня в дате типа ввода?
Кнопка HTML/Javascript не работает в Safari (iPhone, macbook), но работает в других браузерах (Chrome и Samsung Internet)
Уродливые символы возвращаются для месяцев février и décembre в html/php
Попытка равномерно распределить навигационную ссылку изображения с остальными текстовыми ссылками в навигации
Могу ли я сделать работоспособный ход шахматной пешки, используя параметры?
Отладка диаграммы Google
Jquery создает элемент без закрывающего тега
С# Regex.Matches — проблема с кавычками
Vuejs устанавливает максимальную переменную для ввода числа
String.IndexOf() возвращает неожиданное значение — невозможно извлечь подстроку между двумя строками поиска
ul { display: flex; align-items: center; height: 100%;}