Question

我有一个无序列表，我试图将它居中，同时保持列表项文本左对齐，这样它们看起来又漂亮又整洁。我不知道如何在不分配宽度和使用边距的情况下执行此操作：o 自动，我的问题是，是否有更好的方法在列表项 text-align: left 的同时使无序列表居中？

ul.step-list {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        padding: 0;
    }

    ul.step-list li {
        flex: 0 0 33.333333%;
        text-align: left;
    }
    
    /* The container */
    .checkbox-container {
        display: block;
        position: relative;
        padding-left: 35px;
        margin-bottom: 12px;
        cursor: pointer;
        font-size: 22px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

        /* Hide the browser's default checkbox */
        .checkbox-container input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0;
        }

    /* Create a custom checkbox */
    .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 25px;
        width: 25px;
        background-color: #eee;
    }

    /* On mouse-over, add a grey background color */
    .checkbox-container:hover input ~ .checkmark {
        background-color: #ccc;
    }

    /* When the checkbox is checked, add a blue background */
    .checkbox-container input:checked ~ .checkmark {
        background-color: #1f355e;
    }

    /* Create the checkmark/indicator (hidden when not checked) */
    .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }

    /* Show the checkmark when checked */
    .checkbox-container input:checked ~ .checkmark:after {
        display: block;
    }

    /* Style the checkmark/indicator */
    .checkbox-container .checkmark:after {
        left: 9px;
        top: 5px;
        width: 5px;
        height: 10px;
        border: solid white;
        border-width: 0 3px 3px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }

<ul class="step-list">
  <li>
    <label class="checkbox-container">
      <span class="lbl">33' Lot Collection</span>
      <input type="checkbox" id="type" value="7">
      <span class="checkmark"></span>
    </label>
  </li>
  <li>
    <label class="checkbox-container">
      <span class="lbl">36' Lot Collection</span>
      <input type="checkbox" id="type" value="8">
      <span class="checkmark"></span>
    </label>
  </li>
  <li>
    <label class="checkbox-container">
      <span class="lbl">40' Lot Collection</span>
      <input type="checkbox" id="type" value="11">
      <span class="checkmark"></span>
    </label>
  </li>
  <li>
    <label class="checkbox-container">
      <span class="lbl">46' Lot Collection</span>
      <input type="checkbox" id="type" value="17">
      <span class="checkmark"></span>
    </label>
  </li>
  <li>
    <label class="checkbox-container">
      <span class="lbl">50' Lot Collection</span>
      <input type="checkbox" id="type" value="18">
      <span class="checkmark"></span>
    </label>
  </li>
  <li>
    <label class="checkbox-container">
      <span class="lbl">Back To Back</span>
      <input type="checkbox" id="type" value="14">
      <span class="checkmark"></span>
    </label>
  </li>
  <li>
    <label class="checkbox-container">
      <span class="lbl">Semi Collection</span>
      <input type="checkbox" id="type" value="13">
      <span class="checkmark"></span>
    </label>
  </li>
  <li>
    <label class="checkbox-container">
      <span class="lbl">Towns 2 Storey</span>
      <input type="checkbox" id="type" value="9">
      <span class="checkmark"></span>
    </label>
  </li>
  <li>
    <label class="checkbox-container">
      <span class="lbl">Towns 3 Storey</span>
      <input type="checkbox" id="type" value="15">
      <span class="checkmark"></span>
    </label>
  </li>
</ul>

附上一张截图，注意到整个列表在左边，右边有很多空白。我希望我的列表位于页面中间。

Answer 1

使用 margin: 0 auto 仍然可以使用。

您可以使用的另一个选项是 flex。但你必须用 div 包裹你的 ul flex 能够让他的孩子保持水平和垂直居中。

请看下面的代码

div.step-list-wrapper {
  justify-content: center;
  align-items: center;
  background: #666;
  display: flex;
}

ul.step-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  background: #333;
}

ul.step-list li {
  flex: 0 0 33.333333%;
  text-align: left;
}

    
    <div class="step-list-wrapper">
     <ul class="step-list">
       <li>item 1</li>
       <li>item 2</li>
       <li>item 3</li>
       <li>item 4</li>
       <li>item 5</li> 
     </ul>
    </div>

Answer 2

ul.step-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin:0 auto;
    width:66%; /*For example*/
    background:red; /*To highlight*/
}

Margin:0 auto 和 UL 宽度...

JSFiddle：http://jsfiddle.net/zg1jLx9s/

Answer 3

如果您使用的是 bootstrap ，您可以在 li 标签中使用类“text-center”。或属性 text-align: center;

CSS 居中 ul 而 li 是文本左对齐

3 个答案: