0

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.

enter image description here

Oleg Valter is with Ukraine
  • 9,619
  • 8
  • 37
  • 59
user979331
  • 11,039
  • 73
  • 223
  • 418
  • 1
    What do you mean by "center"? Center what in relation to what? It'd help if you'd post an image showing what you'd like to see. – Dai Jan 22 '21 at 00:50
  • I mean center on the page so everything is in the middle horizontal – user979331 Jan 22 '21 at 00:51
  • You mean you want a single column of items? If so, then why are you using `display: flex;`? – Dai Jan 22 '21 at 00:52
  • I am open to suggestions, I just want to get this accomplished – user979331 Jan 22 '21 at 00:53
  • "I just want to get this accomplished" - But **you haven't clearly explained what you want to accomplish**, nor have you answered my question about why you're using `display: flex`. I'm not psychic. – Dai Jan 22 '21 at 00:54
  • I added a screenshot....I used display flex so I can have 3 checkboxes per a line – user979331 Jan 22 '21 at 00:59
  • No, in this case (as you already wrote) there is no way around defining a width for the `ul`, since the `li`elements could be *any* width, from one word to several full-width lines. So, define a width for `ul` and use `margin: 0 auto`, as you already wrote. – Johannes Jan 22 '21 at 01:17
  • Does this answer your question? [Flexbox: center horizontally and vertically](https://stackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically) – Mark Schultheiss Jan 22 '21 at 14:22

3 Answers3

0

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>
Subodha
  • 44
  • 5
  • Should .step-list-wrapper be display: flex and justyfy-content: center? – user979331 Jan 22 '21 at 01:03
  • I was editing the answer.. yes it should. I updated the answer. please check now.. you can remove align-items: center if you don't need to vertically center – Subodha Jan 22 '21 at 01:05
  • This did not work, the ul is still on the right side – user979331 Jan 22 '21 at 01:54
  • Sorry, I have missed adding display: flex into the main wrapper. please see the below code I Have updated it. https://codepen.io/subodha-the-selector/pen/rNMgVGV – Subodha Jan 22 '21 at 11:35
0
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/

0

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

Raja Jee
  • 53
  • 6