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

Question

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

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

Не работает.

Answer 1

Ниже вы увидите примеры центрирующих списков с бутстрапом и без загрузки.

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

Во втором примере, который является моим предпочтительным методом, я использую flexbox. Центр justify-content в значительной степени сообщает элементам горизонтально относительно их родительского 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>

Answer 2

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

text-align: center; 

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

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

width: 500px; 
margin: auto; 

затем регулировать ширину соответственно.