Как я могу центрировать разделитель hr (в bootstrap 4)

#bootstrap-4 #frontend #styling

#bootstrap-4 #интерфейс #стиль

Вопрос:

Как я могу центрировать разделитель hr? По какой-то причине он выровнен по левому краю, несмотря на класс начальной загрузки text-center. Текст до и после него центрируется! Вы можете увидеть это здесь: http://www.mokado.pl/index.html#about

 <section class="about page-section bg-primary" id="about">
      <div class="container">
        <div class="row justify-content-left">
          <div class="text col-lg-4 text-center">
            <h2 class="text-white mt-0">Mokado</h2>
            <hr class="divider light my-4 text-center" />
            <p class="text-white mb-4">
              Ideą marki Mokado jest połączenie estetyki i komfortu... 
            </p>
            <!-- <a class="btn btn-light btn-xl js-scroll-trigger" href="#services"
              >Get Started!</a
            > -->
          </div>
        </div>
      </div>
    </section>
  

Ответ №1:

Добавьте этот CSS в свой hr тег

 hr {
   margin: 0 auto;
}
  

или вы также можете использовать mx-auto class, если вы не хотите писать CSS

Ответ №2:

Похоже, у вас есть стиль CSS, перезаписывающий bootstarp.

Добавьте это в конец вашей таблицы стилей.

Эта строка уже была там margin-top: 1.5rem !important;

Я добавил эти два.

margin-left: auto;

margin-right: auto;

 .mt-4, .my-4 {
    margin-top: 1.5rem !important;
    margin-left: auto;
    margin-right: auto;
}
  

Смотрите снимок экрана.введите описание изображения здесь

Когда я использую код, который вы дали выше, я также вижу его по центру.

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

Комментарии:

1. знаете ли вы, когда вы перезаписываете свойство, которое применяется во всех местах, если оно применяется margin-left: auto and margin-right: auto .mt-4 всякий .mt-4 раз, когда определено, что это свойство css применяется к этому. я думаю, вы не знаете о bootstrap, есть также доступный класс для вышеуказанного свойства, не меняйте его