Блог

Главная - Вопросы по программированию - Выравнивание панели навигации

Выравнивание панели навигации

#html #css #bootstrap-4

#HTML #css #bootstrap-4

Вопрос:

Мне нужно выровнять панель в середине панели навигации по вертикали. Я установил align-items: center для панели, но это выравнивает только кнопку входа. Как вы можете видеть, оно немного выше среднего положения.

 nav a{
color:white;
}
nav{
    justify-content: space-between;
    align-items: center;
    background-color: brown;

}
nav ul{
    list-style: none;
    padding: 0;
    display: flex;
    align-items: center;
    background-color: black;

}
nav ul li a{
    padding: 1rem 0;
    margin: 0 0.5rem;
    position: relative;
    font-size: 14px;
    font-weight: bold;
}
.container{
  background-color: green;
}  
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container" >
            <nav class="d-flex flex-row">
                <h1 class="sling"><a href="index.html">Sling</a></h1>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Features</a></li>
                    <li><a href="#">Pricing</a></li>
                    <li><a href="#">Testimonial</a></li>
                    <li><a href="#">Download</a></li>
                    <li><a href="#">News</a></li>
                    <li><a href="#">Contact us</a></li>
                </ul>
                <button type="button" class="signin">Sign in</button>
            </nav>
        </div>

правильно.

Ответ №1:

Используйте mb-0 в UL, чтобы очистить нижнее поле.

     <nav class="d-flex flex-row align-items-center">
        <h1 class="sling"><a href="index.html">Sling</a></h1>
        <ul class="mb-0">
            <li><a href="#">Home</a></li>
            <li><a href="#">Features</a></li>
            <li><a href="#">Pricing</a></li>
            <li><a href="#">Testimonial</a></li>
            <li><a href="#">Download</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">Contact us</a></li>
        </ul>
        <button type="button" class="signin">Sign in</button>
    </nav>

https://www.codeply.com/go/Fa33cYUN52

Ответ №2:

Вам нужно обнулить нижнюю margin часть nav ul . Поля существуют из-за стилей браузера по умолчанию.

 nav a {
  color: white;
}

nav {
  justify-content: space-between;
  align-items: center;
  background-color: brown;
}

nav ul {
  list-style: none;
  padding: 0;
  margin-bottom: 0; /* <--   Added */
  display: flex;
  align-items: center;
  background-color: black;
}

nav ul li a {
  padding: 1rem 0;
  margin: 0 0.5rem;
  position: relative;
  font-size: 14px;
  font-weight: bold;
}

.container {
  background-color: green;
}  
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container">
  <nav class="d-flex flex-row">
    <h1 class="sling"><a href="index.html">Sling</a></h1>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Features</a></li>
      <li><a href="#">Pricing</a></li>
      <li><a href="#">Testimonial</a></li>
      <li><a href="#">Download</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Contact us</a></li>
    </ul>
    <button type="button" class="signin">Sign in</button>
  </nav>
</div>

Ответ №3:

Все другие говорят о необходимости убрать нижнюю часть поля. Как насчет align-items: baseline; вместо центра:

 nav {
    justify-content: space-between;
    align-items: baseline;
    background-color: brown;
}

https://jsfiddle.net/davidliang2008/3nzgecrt/4/

введите описание изображения здесь