How to Center a <Ul> with Left-Aligned <Li>S

Can I center a ul with left-aligned lis?

Set the <ul> to use display: inline-block;. See http://jsbin.com/atizi4.

Note that inline-block is not supported (completely) for IE ≤7.

Unordered list not aligning all the way to the left in a div

ul and li have margin or padding, depending on the browser, by default. You need to override this default style within your menu:

#menu ul, #menu li {
    margin: 0; padding: 0;
}

See a demo here

^{Note: By default, jsfiddles does a CSS reset, so is not always well suited for testing this kind of thing. Make sure to disable "Normalized CSS" when looking for this kind of bug.}

CSS: How to center align a list element with left aligned text?

Make the ul an inline-block element and center that. Then left align the text of the li.

.container {  width: 600px;  padding: 2em;  background: #eee;  text-align: center;}
ul {  display: inline-block;  text-align: left;}
.align-center {  text-align: center;}

<div class="container">  <p class="align-center">Center Align Test</p>
  <ul>    <li>First element</li>    <li>Second element</li>    <li>Finally, the third and final element</li>  </ul>
</div>

CSS - HTML Lists - center UL in page & left align LI items

The only solution I found, which still allowed the entire UL to take as much as possible from the browser width (for responsiveness) while still centered, was with:

ul.menu {
   margin: 0 auto;
   width: {x}px
}

and using @media queries to set the perfect width for different screen sizes.

Center UL but keep text left aligned

do something like this:

ul {
    text-align: left;
    width: 100px;
}
li {
    background-color: #ff00ff;
    display: inline-block;
    width: 100px;
    padding: 0 20%;
    line-height: 30px;
}

jsfiddle

Place boxes inside ul in center, but align them left

CSS grid can do it. Resize the div to see the result:

div {
  padding: 20px;
  width: 200px;
  border: 1px solid;
  overflow: hidden;
  resize: horizontal;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, 40px); /* width of elements here */
  grid-auto-rows: 40px; /* height here */
  grid-gap: 4px;
  justify-content: center; /* this will do the magic */
}

ul li {
  background-color: wheat;
}

<div>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

ul li to align and justify on left side of div

You can make categorylist ul, text-align:right; instead of left

 #categorylist{      margin-left: auto;      margin-right: auto;      display: table;  }  #categorylist ul {      text-align: right;  }

  <div id="categorylist">                <ul>                    <li class="text-white">ALL <img src="images/all-                       ico.png"></li>                    <li class="text-white">COMUNNITY DEVELOPMENT <img                     src="images/commdev-ico.png"></li>                    <li class="text-white">SPORTS <img src="images/sports-ico.png"></li>                    <li class="text-white">EDUCATION <img src="images/edu-ico.png"></li>                </ul>
        </div>

---

Related Topics