Как я могу выровнять фиксированное 100% меню по центру?
Все шло хорошо, пока я не решил, что хочу, чтобы мое фиксированное меню навигации было полноширинным. Кажется, я не могу найти способ выровнять ul по центру, в то время как его родительский контейнер равен 100%. Он был центрирован, пока я не добавил свойство 100% к его родительскому элементу.
JS Fiddle: https://jsfiddle.net/u504xgey/
nav {
position: fixed;
z-index: 1;
background-color: #ff3300;
width: 100%;
}
nav a {
color: #ffffff;
text-decoration: none;
transition: color 2s;
}
nav a:hover {
color: yellow;
}
ul {
display: block;
margin: auto;
list-style: none;
}
li {
display: inline-block;
color: #ffffff;
margin: 10px 40px;
}<header>
<nav>
<ul>
<li>
<a href = "#landing">
<h3>Home</h3>
</a>
</li>
<li>
<a href = "#about">
<h3>About</h3>
</a>
</li>
<li>
<a href = "#projects">
<h3>Projects</h3>
</a>
</li>
<li>
<a href = "#contact">
<h3>Contact</h3>
</a>
</li>
</ul>
</nav>
</header>
Улучшение производительности загрузки с помощью 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 страниц, которые помогут...
0
0
31
3
Ответы 3
Просто добавьте свойство margin: 0 в свой селектор тела.
body {
background-color: #ffffff;
font-family: "objektiv-mk1", sans-serif;
color: #fffff;
margin: 0;
}
Или центрирование текста UL:
ul{
margin: auto;
list-style: none;
text-align: center;
}
li{
display: inline-block;
color: #ffffff;
margin: 10px 40px;
}
Спасибо, я почему-то совсем не учел простое выравнивание по центру
—
06.07.2018 12:15
Другие вопросы по теме
Какие значения добавляет бутстрап в: root?
Как применить класс css при наведении курсора только для одного элемента html
Как использовать вкладку клавиатуры на скрытых переключателях
CSS Text Gradient для IE 11 и других браузеров
Больше текста в нижней строке в CSS
CSS-анимация переворота не работает в Mozilla
Форма гравитации - Пользовательский CSS - Цвет текста
Строка слайда, когда элемент щелкает, чтобы скользить вниз по соседней строке
Поместите текст, предназначенный только для отображения, в текстовое поле для судоку
Есть ли способ получить хук dom.style changed без async?
Похожие вопросы
Как применить класс css при наведении курсора только для одного элемента html
Как использовать вкладку клавиатуры на скрытых переключателях
CSS-анимация переворота не работает в Mozilla
Функция не вызывается, добавлена с помощью document.getElementById ('someId'). AppendChild ()
Uncaught TypeError: r не является функцией index.js: 1
Использование ajax для создания таблицы html на основе элементов массива базы данных в php
Как загрузить файл в формате html?
Форма гравитации - Пользовательский CSS - Цвет текста
Строка слайда, когда элемент щелкает, чтобы скользить вниз по соседней строке
Преобразование HTML с тегом <br> (но без закрывающего тега br) в PDF в java
Спасибо, подумал, что это будет сложно, поэтому попробовал все, кроме text-align: center