文本左对齐但 div 居中答案

【问题标题】：Text align left but div center文本左对齐但 div 居中
【发布时间】：2016-02-13 23:33:33
【问题描述】：

我想创建一个左对齐的列表，但我希望该块在页面上居中。
由于我没有宽度，因为在 iPhone 的 Safari 上观看时尺寸不同，所以很难做到，我不知道如何...... 谢谢！

<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>

【问题讨论】：

你到底想把哪个块居中？
div，但我放弃了。刚刚使用了另一种时间方法

标签： html iphone center text-align

【解决方案1】：

由于您要创建一个列表，我将首先使用ol tag（有序列表）而不是带有一堆中断标签的 p 标签。然后，如果列表包含在 div 或块元素中（块元素跨越窗口的整个宽度），您可以通过给它一个宽度来居中块元素，并在 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;
}

【讨论】：

谢谢，但我必须更改所有内容并对其进行编码以使数字变粗。我现在选择了另一种选择。

【解决方案2】：

<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">

【讨论】：