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;}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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