#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, есть также доступный класс для вышеуказанного свойства, не меняйте его