Как центрировать логотип, имея элементы рядом с ним?
.header{
min-height: 90vh;
width: 100%;
background-image: linear-
gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),
url(../images/background.jpg);
background-position: center;
background-size: cover;
position: relative;
overflow: hidden;
background-repeat: no-repeat;
background-attachment: fixed;
}
nav{
min-height: 7%;
background-color: white;
opacity: 0.8;
display: flex;
padding: 2% 4%;
justify-content: space-between;
align-items: center;
}
nav img{
width: 140px;
}
.nav-links{
flex: 1;
text-align: right;
}
.nav-links ul li{
list-style: none;
display: inline-block;
padding: 8px 12px;
position: relative;
}
.nav-links ul li a{
color: rgb(0, 0, 0);
text-decoration: none;
font-size: 13px;
}
.nav-links ul li::after{
content: '';
width: 0%;
height: 2px;
background: #f44336;
display: block;
margin: auto;
transition: 1s;
}
.nav-links ul li:hover::after{
width: 100%;
}
nav .fa{
display: none;
} <section class = "header">
<nav>
<a href = "index.html"><img src = "../images/logo.png"></a>
<div class = "nav-links" id = "navLinks">
<i class = "fa fa-close" onclick = "hideMenu()"></i>
<ul>
<li><a href = "index.html">HOME</a></li>
<li><a href = "about.html">ABOUT US</a></li>
<li><a href = "locations.html">LOCATIONS</a></li>
<li><a href = "products.html">PRODUCTS</a></li>
<li><a href = "contact.html">CONTACTS</a></li>
</ul>
</div>
<i class = "fa fa-bars" onclick = "showMenu()"></i>
</nav>
<div class = "text-box">
<h1>AVEM SALAM</h1>
<p>AICI CEVA DESCRIERE<br>YOU KNOW SHORT AND GOOD</p>
<a href = "products.html" class = "hero-btn">PRODUSELE NOASTRE</a>
</div>
</section>Кроме того, мне нужна помощь, связанная с размером панели навигации, как мне сделать ее меньше по высоте? Я сделал все возможное, чтобы использовать «min-height: 7%;» но этого не достаточно... Похоже, ваш пост в основном код; пожалуйста, добавьте больше деталей. Похоже, что ваш пост в основном код; пожалуйста, добавьте больше деталей. Похоже, что ваш пост в основном код; пожалуйста, добавьте больше деталей. Похоже, что ваш пост в основном код; пожалуйста, добавьте некоторые подробности. [![Это должно выглядеть вот так][2][2]
[![Так вот как сейчас выглядит панель навигации][1]][1] [1]: https://i.stack.imgur.com/UVWJg.jpg [2]: https://i.stack.imgur.com/BNswb.png
Тогда, не используя%, как я могу уменьшить его?
height: 100px; например
Ага, спасибо, с высотой height: 30px это выглядит лучше; Я не знаю всех секретов CSS.
Можете ли вы также помочь мне центрировать логотип, располагая элементы рядом с ним?
нравится это i.stack.imgur.com/BNswb.png
Ваш HTML неверен, вам нужно иметь 2 отдельных списка и изображение между ними - если вы не хотите сделать изображение частью своего списка - что я не советую.
дерьмо, я не знаю, как это сделать, ну, это будет долгая ночь, спасибо, приятель, за помощь с размером навигации
Я отправил вам ответ с правильным HTML, но ваши CSS и HTML очень запутаны и устарели. Хорошая мысль :)
Я знаю о грязной части, кодирую около 7 недель.
Ответы 2
Ваш порядок DOM неверен, попробуйте этот HTML
<section class = "header">
<nav>
<div class = "nav-links" id = "navLinks">
<i class = "fa fa-close" onclick = "hideMenu()"></i>
<ul>
<li><a href = "index.html">HOME</a></li>
<li><a href = "about.html">ABOUT US</a></li>
</ul>
</div>
<a href = "index.html"><img src = "../images/logo.png"></a>
<div class = "nav-links" id = "navLinks">
<i class = "fa fa-close" onclick = "hideMenu()"></i>
<ul>
<li><a href = "locations.html">LOCATIONS</a></li>
<li><a href = "products.html">PRODUCTS</a></li>
<li><a href = "contact.html">CONTACTS</a></li>
</ul>
</div>
<i class = "fa fa-bars" onclick = "showMenu()"></i>
</nav>
<div class = "text-box">
<h1>AVEM SALAM</h1>
<p>AICI CEVA DESCRIERE<br>YOU KNOW SHORT AND GOOD</p>
<a href = "products.html" class = "hero-btn">PRODUSELE NOASTRE</a>
</div>
</section>
если вы хотите, чтобы элементы вокруг вашего логотипа и логотипа были центрированы, тогда ваш код полностью написан неправильно.
сделать родительский-div со свойством отображения: flex
а затем создайте три дочерних элемента div с классами nav-leftлоготип и навигация-вправо и дайте им ширину в процентах 33,33%
включить ul li в первый div с классом nav-left
затем добавьте свой логотип во второй элемент div, чтобы вы могли контролировать реакцию вашего изображения.
и, наконец, включите ul li в третий div с классом nav-right
О ВЫСОТЕ
удалить высоту из навигации, и я предполагаю, что вы новичок в коде, тогда вы также должны сделать это
ul,li {
padding: 0;
margin : 0;
}
это следует сделать до того, как вы начнете стилизовать, потому что некоторые html-теги имеют отступы и поля по умолчанию (задайте этот поиск в Google, чтобы вы знали, какие теги имеют этот стиль по умолчанию, например, теги p, теги заголовков, теги привязки и т. д.), вы должны удалите это, а затем добавьте свои стили. Надеюсь, это поможет вам :)
Вы используете очень устаревший подход. Избегайте использования %, если только вы не можете позволить себе неточность или если элемент действительно должен масштабироваться вместе с размером области просмотра. Если вы используете % для высоты навигации, она будет огромной на вертикальных экранах. Наконец, попробуйте перефразировать свой вопрос - я не знаю, о чем вы спрашиваете, поэтому я могу только дать вам совет.