Question

我想创建一个左对齐的列表，但我希望块在页面上居中由于我没有宽度，因为在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>

Answer 1

由于您尝试制作列表，我首先使用ol tag（有序列表）而不是带有一堆中断标记的p标记。然后，如果列表包含在div或块元素中（块元素跨越窗口的整个宽度），您可以通过给它一个宽度来居中块元素，并在css中给它边距：0 auto; 。这意味着您要告诉计算机左右边距相等。确保将元素设置为以宽度为中心，否则保证金：0自动无法工作。

如果您不确定宽度，请确定您想要居中元素的屏幕数量（即：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;
}

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

文本左对齐但div中心

2 个答案: