中心ul但保持左对齐

Question

我使用Bootstrap创建了一个简单的页面，并希望我的ul在移动设备上居中对齐，但文本左对齐。我尝试在我的CSS文件中将text-align设置为left，左右边距设置为auto，但它没有居中：

CodePen

这是应用于ul的CSS：

ul {
  list-style: none;
  text-align: left;
  /* Bottom set to 3em to match margin above ul created by blockquote */
  margin: 0 auto 3em auto;
}

Answer 1

如果您正在寻找此解决方案，则需要添加padding-left：0

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class ="container" id="repair">
    <ul class="brand">
      <li data-id="1" class>Apple</li>
      <li data-id="2" class>Lenovo</li>
      <li data-id="3" class>Dell</li>
      <li data-id="4" class>HP</li>
    </ul><!-- end of brand -->

    <div class ="title">Model</div>
      <ul id="model" class="model">
        <li data-id="11" data-name="MacBook Air">MacBook Air</li>
        <li data-id="12" data-name="MacBook Pro">MacBook Pro</li>
        <li data-id="13" data-name="MacBook">MacBook</li>
        <li data-id="21" data-name="Lenovo X260">Lenovo X260</li>
        <li data-id="22" data-name="Lenovo X270">Lenovo X270</li>
        <li data-id="23" data-name="Lenovo X280">Lenovo X280</li>
        <li data-id="31" data-name="Dell Latitude 1400">Dell Latitude 1400</li>
      </ul> <!--end of table-->
</div>