2015-11-12 4 views
0

Я хочу создать список, который выровнен по левому краю, но я хочу, чтобы блок был центрирован на странице.
Поскольку у меня нет ширины, потому что размер отличается при просмотре на iPhone Safari, это очень сложно сделать, и я не знаю, как ... Спасибо!Текст выравнивается влево, но div-центр

<center> 
<div style="width:;text-align:center;margin:0 auto 1em auto;border:1px solid white;padding:0cm 0.5cm 0cm 12%"> 
    <p style="text-align:left;"> 
    <b>1.</b> text one<br> 
     <font size="1"> &nbsp; &nbsp; small sub</font><br><br> 
    <b>2.</b> text two is longer because he think it's very cool to stand out but hey everything is alright<br><br> 
    <b>3.</b> three is a tree<br><br> 
    <b>4.</b> four means nothing<br><br> 
    <b>5.</b> short<br><br> 
     <center>fake center text with padding</center> 
    </p> 
</div><br><br> 
    real center text 
</center> 
+0

Какой блок именно вы хотите быть в центре? –

+0

The div, но я сдаюсь. Просто использовал другой временный метод – myspider

ответ

0

Поскольку вы пытаетесь сделать список, я бы первым использовать ol tag (упорядоченный список) вместо р тег с кучей тегов излома. И тогда, если список содержится в элементе div или block (блочный элемент охватывает всю ширину окна), вы можете центрировать элемент блока, указав его ширину и в css дать ему margin: 0 auto; , Это означало бы, что вы говорите компьютеру, чтобы он дал равные поля слева и справа. Не забудьте указать элемент, который вы центрируете ширину, или же margin: 0 auto не будет работать.

Если вы не уверены в ширине, определите, на какой части экрана вы хотите, чтобы центрированный элемент принимал (т.е. 50%, 90% и т. Д.). Надеюсь, это поможет!

<div id="center"> 
<ol> 
    <li>text one</li> 
    <li>text two</li> 
    <li>three is a tree</li> 
    <li>four means nothing</li> 
    <li>short</li> 
</ol> 
</div> 

CSS

#centered{ 
    width: 50%; 
    margin: 0 auto; 
} 
+0

Спасибо, но мне нужно все изменить и закодировать его, чтобы получить цифры жирным шрифтом. К этому моменту я пошел на другой вариант. – myspider

0
<style>head,body{font-family:ubuntu,Arial,sans-serif;color:white;background-color:black} a{color:white;} 
.mobile{width:635px;margin:0 auto;text-align:left;padding:0.3cm 0cm 0.5cm 2%;} 
.mobiles{width:65%;text-align:center;margin:0 auto 1em auto;border:1px solid white;padding:0.1cm 0.3cm 0cm 3%;} 
@media only screen and (min-device-width:320px) and (max-device-width:568px) 
    {.mobile{width:100%;padding:0.5cm 0cm 0.5cm 2% 
    .mobiles{width:auto;text-align:center;margin:0 auto 1em auto;border:1px solid white;padding:0cm 0.5cm;} 
    ;}</style> 

<div class="mobiles"><p class="mobile"> 
Смежные вопросы