Как выровнять текст влево и в центре на экране

Question

Мне не хватает чего-то простого. У меня есть ul с 3 li, и на данный момент он лежит на левой стороне контейнера. Я хочу, чтобы lis сохранил свой вид text-align: left, но я хочу, чтобы они были центрированы по горизонтали в div.

Примечание:Я хотел бы отклониться от столов И я хотел бы избежать ширинов, которые должны быть отрегулировано на различного размерах экрана

HTML:

<div> 
    <ul> 
     <li>One</li> 
     <li>Two</li> 
     <li>Three</li> 
    </ul> 
</div> 

CSS:

div {width: 100%} 
ul { 
    border: dashed 1px rgb(0,0,100); 
    list-style: none; 
    padding-left: 0; 
} 
ul > li { 
    background-color:#cccccc; 
    border-bottom:1px solid white; 
    border-top:1px solid white; 
    padding: 1% 0; 
} 

jsFiddle:http://jsfiddle.net/uqkhcktj/

С желаемого эффекта, но без использования Set Widthhttp://jsfiddle.net/uqkhcktj/2/

Answer 1

То, что вы действительно хотите, чтобы центрировать контейнер списка без абсолютной ширины (следует автоматически соответствует ширине списка);

Просто установите ширину контейнера для автоматического использования и используйте display:inline-block;, чтобы контейнер мог расти как можно больше. После этого просто центрируйте контейнер внутри родителя и принудительно переместите список text-align влево, чтобы он не наследовал централизованное выравнивание от его родителя.

http://jsfiddle.net/uqkhcktj/5/

div#parent { 
    text-align:center; 
} 
div#container { 
    display:inline-block; 
    width: auto; 
} 
ul { 
    text-align:left; 
    border: dashed 1px rgb(0,0,100); 
    list-style: none; 
    padding-left: 0; 
} 

Answer 2

Я не уверен, если вам нужно литиево быть какой-либо конкретной ширины, но способ сделать это было бы с запасом: авто

скрипку: http://jsfiddle.net/uqkhcktj/3/

HTML

<div> 
    <ul> 
     <li>One</li> 
     <li>Two</li> 
     <li>Three</li> 
    </ul> 
</div> 

CSS

div {width: 100%} 
div li 
{ 
    width:50%; 
    margin:auto; 
} 
ul { 
    border: dashed 1px rgb(0,0,100); 
    list-style: none; 
    padding-left: 0; 
} 
ul > li { 
    background-color:#cccccc; 
    border-bottom:1px solid white; 
    border-top:1px solid white; 
    padding: 1% 0; 
} 

Answer 3

Если вы хотите что-то подобное и все еще сохраняете полный вид ширины, вы можете добавить диапазон к html, чтобы вы могли сосредоточить слова конкретно. Вам необходимо установить ширину и сделать поле: 0 авто, чтобы центрировать их.

Js Fiddle: https://jsfiddle.net/7mgp4srk/1/

Html:

<div> 
    <ul> 
     <li><span>One</span></li> 
     <li><span>Two</span></li> 
     <li><span>Three</span></li> 
    </ul> 
</div> 

Css:

div {width: 100%} 
ul { 
    border: dashed 1px rgb(0,0,100); 
    list-style: none; 
    padding-left: 0; 
} 
ul > li { 
    background-color:#cccccc; 
    border-bottom:1px solid white; 
    border-top:1px solid white; 
    padding: 1% 0; 
} 

ul > li span { 
    width:20%; 
    margin:0 auto; 
    display:block; 
}