Блог

Главная - Вопросы по программированию - Как создать div с неупорядоченным списком в Center bootstrap?

Как создать div с неупорядоченным списком в Center bootstrap?

#html #twitter-bootstrap #center #unordered

#HTML #twitter-bootstrap #центр #неупорядоченный

Вопрос:

text-center Делает тексты по центру, но точки все еще в левом углу.

 float: none;
margin-left: auto;
margin-right: auto;

Не сработало.

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

1. Опубликуйте свой UL-код

Ответ №1:

Ниже вы увидите примеры центрирования списков с помощью bootstrap и без bootsrap.

В первом примере я центрирую, используя концепцию столбцов начальной загрузки. Вы знаете, что сетки начальной загрузки интерпретируют 12 столбцов как полноэкранный режим, поэтому я, по сути, говорю, что список помещается в 6 столбцов со смещением в 3 столбца ( (12 — 6)/2 = 3).

Во втором примере, который является моим предпочтительным методом, я использую flexbox. justify-центр содержимого в значительной степени указывает элементам горизонтально центрироваться относительно их родительского div. (div, в котором был вызван flexbox)

 h4 {
  text-align: center;
}

.list {
    display: flex;
  justify-content: center;
}  
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<div class="row">
  <h4>Centering unordered lists with bootstrap columns</h4>
  <div class="col-xs-6 col-xs-offset-3">
    <ol>
      <li>Lorem ipsum blah blah blah</li>
      <li>Lorem ipsum blah blah blah</li>
      <li>Lorem ipsum blah blah blah</li>
      <li>Lorem ipsum blah blah blah</li>
      <li>Lorem ipsum blah blah blah</li>
      <li>Lorem ipsum blah blah blah</li>
    </ol>
  </div>
</div>
<hr><br><hr>
<div class="no-bootstrap">
  <h4>Centering unordered lists without boostrap</h4>
  <div class="list">
    <ol>
      <li>Lorem ipsum blah blahsdfadsf blah</li>
      <li>Lorem ipsum blah blah blah</li>
      <li>Lorem ipsum blah blah blah</li>
      <li>Lorem ipsum blah bdfasdfasdflah blah</li>
      <li>Lorem ipsum blah blah blah</li>
      <li>Lorem ipsum blah blah blah</li>
    </ol>
  </div>
</div>

Ответ №2:

Попробуйте это:

 text-align: center;

Ваша формулировка выше была не очень хорошей, поэтому не слишком уверена, пробовали ли вы это.

Или вы можете определить width в css, а затем сделать margin: auto; так:

 width: 500px;
margin: auto;

затем соответствующим образом отрегулируйте ширину.