如何居中<ul>尽管<li>元素文本左对齐？</li></ul>

Question

I have an unorder list that I am trying to center, while keeping the list items text-align to the left so they look nice and neat. I have no idea how to do this without assigning a width and using margin: 0 auto , my question is, is there a better way to center the unorder list while having the list items 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>

Attached is a screenshot, noticed the whole list is to the left and there is a ton of white space on the right. I want my list to be in the middle of the page.

Answer 1

using margin: 0 auto is still fine to use.

another option that you can use is flex. but you have to wrap your ul with a div flex has the ability to keep his child place horizontally and vertically center.

please see the below code

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 , and UL width...

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

Answer 3

If you are using bootstrap, you can use class "text-center" in li tag. or the property text-align: center;