Центрировать элемент в 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 больше не центрируется.

enter image description here

Чтобы решить эту проблему, можно использовать один из обходных путей 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

enter image description here

Ответ 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>