Как центрировать элементы списка на панели навигации flex box? - PullRequest
Новая
       20

Как центрировать элементы списка на панели навигации flex box?

0 голосов
/ 27 июня 2018

У меня есть следующий код: 

.flex {
  display: flex;
  background-color: yellow;
  list-style-type: none;
}

.flex > li {
  flex: 1;
  border: 1px solid black;
  align-items: center;
}
<nav>
  <ul class="flex">
    <!--Logo as a link-->
    <li><a href="{% url 'index' %}">Logo</a></li>
    <li><a>REGISTER</a></li>
    <li><a>LOGIN</a></li>
    <!--Search Bar-->
    <li class="search_bar">
      <form method="GET" action="{% url 'search' %}">
        <input name="query" type="text" placeholder="Zip Code or City/Town">
        <button class="btn btn-outline-success text-white my-2 my-sm-0" type="submit"></button>
      </form>
    </li>
  </ul>
</nav>

http://jsfiddle.net/0jh3fud9/2/

Как расположить элементы списка («ЛОГОТИП», «РЕГИСТРАЦИЯ», «ВХОД», «ПОИСК») в пределах границы, в которой они находятся?

Ответы [ 2 ]

0 голосов
/ 27 июня 2018

Что вы должны сделать, это объявить ваши элементы как flex контейнер, как вы сделали.

Добавьте к ним свойства align-items: center; и justify-content: center;, но вы на самом деле здесь этого не делаете, поскольку нет места, где вы могли бы центрировать что-либо, следовательно, оно не знает, к чему это центрировать.

Удалите flex: 1;, и я рекомендую добавить padding: 10px; и margin: 5px;, и это должно работать. Если вы хотите, чтобы они были рядом, добавьте только отступы.

P.S. Вы также можете использовать text-align: center;

0 голосов
/ 27 июня 2018

Попробуйте добавить закомментированные правила CSS к вашим элементам li ( см. Обновленную скрипту ): 

.flex > li {
    display: flex; // <-- make flex items
    align-items: center; // <-- center vertically in box
    justify-content: center; // <-- center horizontally in box
    flex: 1;
    border: 1px solid black;
    align-items: center;
}

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

...