2016-11-07 2 views
1

Я сделал список точек в формате HTML. Затем я сосредоточил текст и пункты. Однако, как только я сосредоточусь на тексте, я хочу, чтобы текст находился в прямой линии слева, поэтому точки маркера не расположены в шахматном порядке. Есть ли способ, которым я могу это сделать.Выровнять текстовый центр и уровень слева от текста HTML

enter image description here

Мой CSS как залежи центрирования мой текст

.l-section.wpb_row.height_auto.color_alternate { 
     text-align:center; 
    } 

центрирования мои пули точки

.wpb_text_column p:last-child, .wpb_text_column ul:last-child, .wpb_text_column ol:last-child{ 
    list-style-position: inside; 
} 
+0

Добавить текст выравнивать: центр родителя и для бюллетеней добавить текст выравнивания : left –

+0

Это было отмечено как дубликат http://stackoverflow.com/questions/403 72065, но я открыл его, так как не думаю, что у них одни и те же вопросы. Связывание этого здесь в комментариях на случай, если я ошибаюсь! –

+0

@JamesDonnelly Единственное различие, которое я вижу, это ссылка, которая имеет выравнивание текста вправо, и это осталось. –

ответ

3

Установите ul для отображения в качестве inline-block допустить, что могут быть затронуты по свойству внешнего элемента text-align, затем дать ему свой собственный text-align набора для left для выравнивания внутренних элементов списка:

div { 
 
    text-align: center; 
 
} 
 

 
ul { 
 
    display: inline-block; 
 
    text-align: left; 
 
}
<div> 
 
    <ul> 
 
    <li>Foo</li> 
 
    <li>Bar</li> 
 
    <li>Foobar</li> 
 
    </ul> 
 
</div>

0

Добавить text-align: left; в список Доски отображается.

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <style> 
 
    li { 
 
     text-align: left; 
 
    } 
 
    </style> 
 
</head> 
 
<body> 
 

 
<h4>An Unordered List:</h4> 
 
<ul> 
 
    <li>Coffee</li> 
 
    <li>Tea</li> 
 
    <li>Milk</li> 
 
</ul> 
 

 
</body> 
 
</html>

0

Использование Flexbox над вашими ул элементов и его отца:

 .father { 
      display: flex; 
      flex-direction: row; 
      flex-wrap: nowrap; 
      justify-content: space-around; 
      align-content: flex-start; 
     } 
     ul{ 
      display: flex; 
      flex-direction: column; 
      flex-wrap: nowrap; 
      justify-content: space-around; 
      align-content: flex-start; 
     } 
0

Я думаю, что вы можете сделать это с помощью CSS Flexbox свойства. Ниже мой код

HTML КОД

<h4>Heading</h4> 
<div class="container"> 
<ul> 
    <li>1st row</li> 
    <li>2nd row</li> 
    <li>3rd row</li> 
    <li>4th row</li> 
</ul> 

CSS КОД

.container{display:flex; align-items:center;justify-content:center} 
h4{text-align:center;} 
Смежные вопросы