0

Как выровнять list-group по центру? По дефолту жмётся к левому краю. Bootsrap 4.

    .list-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
}
 <section class="conteiner text-center  ">
            <h1>Заголовок</h1>
            <div class="list-group " style="max-width: 900px; ">
                <a href="#" class="list-group-item list-group-item-action active">
                    Мы делаем #1
            </a>
                <a href="#" class="list-group-item list-group-item-action">Мы делаем #2
            </a>
                <a href="#" class="list-group-item list-group-item-action disabled">Мы делаем #3
            </a>
            </div>

            <p>
                <a href="# " class="btn btn-primary my-2 ">Позвоните нам</a>
                <a href="# " class="btn btn-secondary my-2 ">Напишите нам</a>
            </p>

        </section>

1
  • Пример кода, стиля или страницы в студию!
    – Arcadiy
    7 дек 2018 в 9:25

3 ответа 3

2

.list-group задать margin: auto;

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" >
  
  
   <section class="conteiner text-center  ">
     <h1>Заголовок</h1>
     <div class="list-group mx-auto w-100" style="max-width: 900px; ">
       <a href="#" class="list-group-item list-group-item-action active">
         Мы делаем #1
       </a>
       <a href="#" class="list-group-item list-group-item-action">Мы делаем #2
       </a>
       <a href="#" class="list-group-item list-group-item-action disabled">Мы делаем #3
       </a>
     </div>

     <p>
       <a href="# " class="btn btn-primary my-2 ">Позвоните нам</a>
       <a href="# " class="btn btn-secondary my-2 ">Напишите нам</a>
     </p>

  </section>

2
  • Еще вместо добавления отступов в стилях можно в .list-group добавить класс mx-auto. Делает тоже самое. 12 дек 2018 в 11:15
  • @AntonMironov, точно! Забыла)
    – SVE
    12 дек 2018 в 11:17
0

Через text-align:center, ну и bootstrap есть классы text-center(только 3?) и text-sm-center, text-md-center, text-lg-center, text-xl-center (только 4?)

.list-group {
    text-align:center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
}
<section class="conteiner text-center  ">
            <h1>Заголовок</h1>
            <div class="list-group " style="max-width: 900px; ">
                <a href="#" class="list-group-item list-group-item-action active">
                    Мы делаем #1
            </a>
                <a href="#" class="list-group-item list-group-item-action">Мы делаем #2
            </a>
                <a href="#" class="list-group-item list-group-item-action disabled">Мы делаем #3
            </a>
            </div>

            <p>
                <a href="# " class="btn btn-primary my-2 ">Позвоните нам</a>
                <a href="# " class="btn btn-secondary my-2 ">Напишите нам</a>
            </p>

        </section>

2
  • Обёртка <section> уже имеет класс 'text-center', но это влияет только на текст внутри, а не на div 7 дек 2018 в 10:07
  • @Александр, ага - не заметил. Ну а что мешает тогда добавить этот класс в div? Нет под рукой boostrap 4 попробовать.
    – Nsk
    7 дек 2018 в 10:10
-1

Решение:

добавить в .list-group {margin: 0 auto;}

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.