Центрировать элемент в Bootstrap 4 Navbar

Независимо от того, что я пытаюсь, я не могу сосредоточить что-то в Bootstrap navbar, какие-либо решения для этого?

Я попытался добавить div, используя margin:0 auto; или margin-right:auto; margin-left:auto; margin-right:auto; margin-left:auto; , используется класс center-block. Ничего не работает, почему так сложно достичь чего-то такого простого, что я не могу понять, что я делаю неправильно?

Здесь текущий код:

<nav class="navbar navbar-fixed-top navbar-dark main-nav">
<div class="container">
    <ul class="nav navbar-nav pull-left">
        <li class="nav-item active">
            <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Download</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Register</a>
        </li>
    </ul>

    <ul class="nav navbar-nav text-center">
        <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
    </ul>

    <ul class="nav navbar-nav pull-right">
        <li class="nav-item">
            <a class="nav-link" href="#">Rates</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Help</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
        </li>
    </ul>
</div>

Ответы

Ответ 1

В Bootstrap 4 есть новая утилита, известная как .mx-auto. Вам просто нужно указать ширину центрированного элемента.

Ссылка: http://v4-alpha.getbootstrap.com/utilities/spacing/#horizontal-centering

Дифференциал от ответа Басса Джессена, который является относительным центром элементов на обоих концах, следующий пример является абсолютным центром.

Здесь HTML:

<nav class="navbar bg-faded">
  <div class="container">
    <ul class="nav navbar-nav pull-sm-left">
      <li class="nav-item">
        <a class="nav-link" href="#">Link 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 3</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 4</a>
      </li>
    </ul>
    <ul class="nav navbar-nav navbar-logo mx-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Brand</a>
      </li>
    </ul>
    <ul class="nav navbar-nav pull-sm-right">
      <li class="nav-item">
        <a class="nav-link" href="#">Link 5</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 6</a>
      </li>
    </ul>
  </div>
</nav>

И CSS:

.navbar-logo {
  width: 90px;
}

Ответ 2

Обновлено для Bootstrap 4. 1+

Bootstrap 4 теперь панель навигации использует flexbox, поэтому имя Website Name можно центрировать с помощью mx-auto. Левые и правые боковые меню не требуют поплавков.

<nav class="navbar navbar-expand-md navbar-fixed-top navbar-dark bg-dark main-nav">
    <div class="container">
        <ul class="nav navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Download</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Register</a>
            </li>
        </ul>
        <ul class="nav navbar-nav mx-auto">
            <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
        </ul>
        <ul class="nav navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Rates</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Help</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>
        </ul>
    </div>
</nav>

Навбар центр с mx-auto Демо

Если у Navbar есть только одна navbar-nav, тогда justify-content-center также можно использовать для navbar-nav.

РЕДАКТИРОВАТЬ

В приведенном выше решении имя Website Name центрируется относительно левой и правой navbar-nav поэтому, если ширина этих соседних навигационных панелей отличается, имя Website Name больше не центрируется.

Чтобы решить эту проблему, можно использовать один из обходных путей flexbox для абсолютного центрирования...

Вариант 1 - Положение использования: абсолютное;

Поскольку в flexbox можно использовать абсолютное позиционирование, одним из вариантов является использование этого элемента для центрирования элемента.

.abs-center-x {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

Навбар центр с абсолютной позицией Демо

Вариант 2 - использовать вложение flexbox

Наконец, другой вариант - сделать так, чтобы центрированный элемент также display:flexbox (используя d-flex) и display:flexbox по центру. ~~В этом случае каждый компонент navbar должен иметь flex-grow:1~~

Начиная с Bootstrap 4 Beta, теперь display:flex панель навигации display:flex. Bootstrap 4.1.0 включает новый класс flex-fill чтобы каждый раздел навигации заполнял по ширине:

<nav class="navbar navbar-expand-sm navbar-dark bg-dark main-nav">
    <div class="container justify-content-center">
        <ul class="nav navbar-nav flex-fill w-100 flex-nowrap">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Download</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Register</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">More</a>
            </li>
        </ul>
        <ul class="nav navbar-nav flex-fill justify-content-center">
            <li class="nav-item"><a class="nav-link" href="#">Center</a></li>
        </ul>
        <ul class="nav navbar-nav flex-fill w-100 justify-content-end">
            <li class="nav-item">
                <a class="nav-link" href="#">Help</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>
        </ul>
    </div>
</nav>

Навбар центр с раскладкой Flexbox Демо

До Bootstrap 4.1.0 вы можете добавить класс flex-fill следующим образом...

.flex-fill {
   flex:1
}

Начиная с 4.1, flex-fill включен в Bootstrap.

Bootstrap 4 демонстрации центра Navbar
Больше центрирующих демонстраций
Центрировать ссылки на рабочем столе, выравнивать по левому краю на мобильном телефоне

Связанные с:
Как центрировать навигационные элементы в Bootstrap?
Начальная загрузка NavBar с левыми, центральными или правыми выровненными элементами
Как переместить элемент "nav" под "navbar-brand" в моем Navbar

Ответ 3

Попробуй это.

.nav-tabs > li{
    float:none !important;
    display:inline-block !important;
}

.nav-tabs {
    text-align:center !important;
}

Ответ 4

См. fooobar.com/questions/442353/..., теперь вы можете использовать:

<nav class="navbar navbar-light main-nav">
<div class="container text-xs-center">
    <ul class="nav navbar-nav pull-xs-left">
        <li class="nav-item active">
            <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Download</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Register</a>
        </li>
    </ul>

    <ul class="nav navbar-nav" style="display: inline-block;">
        <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
    </ul>

    <ul class="nav navbar-nav pull-xs-right">
        <li class="nav-item">
            <a class="nav-link" href="#">Rates</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Help</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
        </li>
    </ul>
</div>
</nav>

примените text-xs-center на вашем контейнере и установите display: inline-block; для вашего списка.

Ответ 5

У меня была аналогичная проблема; якорный текст в моей навигационной панели Bootstrap4 не был центрирован. Просто добавлен text-center в класс привязки.

Ответ 6

сделать новый стиль

.container {
    position: relative;
}
.center-nav {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: auto;
    max-width: 200px;
    text-align: center;
}
.center-nav li{
  text-align: center;
  width:100%;
}

Заменить имя веб-сайта UL ниже

<ul class="nav navbar-nav center-nav">
        <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
 </ul>

Надеюсь это поможет..

Ответ 7

из документов

Navbars может содержать биты текста с помощью.navbar-text. Этот класс настраивает вертикальное выравнивание и горизонтальное расстояние для строк текста.

Я применил класс.navbar-text к элементу <li>, поэтому результат

<li class="nav-item navbar-text">

это центрирует ссылки по вертикали относительно моего навигационного бренда img

Ответ 8

использовать mx-auto сделает работу

<ul class="navbar-nav mx-auto">

Ответ 9

Почему бы не использовать утилиты начальной загрузки. вот код

    <nav class="navbar navbar-expand-md bg-light navbar-light fixed-top">
  <!-- Brand -->
  <a class="navbar-brand" href="#"><img src="your-logo"/></a>

  <!-- Toggler/collapsibe Button -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>

  <!-- Navbar links -->
  <div class="collapse navbar-collapse mx-auto justify-content-md-center" id="collapsibleNavbar" >
    <ul class="navbar-nav col-md-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li> 
    </ul>
  </div> 
</nav>