How to Center ≪Ul≫ ≪Li≫ into a Div

How can I center ul li into a div?

Since ul and li elements are display: block by default — give them auto margins and a width that is smaller than their container.

ul {
width: 70%;
margin: auto;
}

If you've changed their display property, or done something that overrides normal alignment rules (such as floating them) then this won't work.

Centering div within li in css

Give the div a class, like this:

<div class="someClass">Hello again</div>

Then, give it a width that's less than the width of your li and add "margin:auto" to center it:

.someClass { width: 80%; margin:auto }

How to center a ul in a div for a responsive page

Another edited version of my answer:
Use these settings :

#number_container {
overflow: hidden;
background-color: #07c;
text-align: justify;
}

ul {
padding: 0;
}
li {
display: inline-block;
list-style: none;
}
ul li a {
display: inline-block;
padding: 5px 5px 3px 5px;
margin: 5px;
min-width: 35px;
min-height: 35px;
line-height: 37px;
color: #333;
text-decoration: none;
text-align: center;
background-color: #fff;
}

This aligns the last row of <li> elements left, which you apparently were aiming at. Another possibility would be text-align: center; for #number_container (see also my fiddle https://jsfiddle.net/f77ujsqb/1/ ), which aligns the last row centered.

center ul li images in div

If you give float: left, it will never be considered as an inline element. Use display: inline-block to make it an inline element with block's properties to center it using text-align: center:

.brands li {
display: inline-block;
list-style: none;
}
.brands ul {
text-align: center;
margin-right: 10%;
margin-left: 10%;
}

How to horizontally center align li in ul?

  1. Open the developer tools in your browser.
  2. Inspect the list and the list items
  3. Find where there is some spacing you don't want

enter image description here

… then remove it:

ul {
padding-left: 0;
}

How can I center my ul li list in css?

http://jsfiddle.net/tfLz08vd/2/

just add

ul {
text-align: center;
}

li {
display: inline-block;
}

Good luck! ;)

Can't center li inside ul

If you are designing a menu you need this markup:

<div class="menu">
<ul>
<li><a href="#" class="menu">Item 1</a></li>
<li><a href="#" class="menu">Item 2</a></li>
</ul>
</div>

and this CSS to align the items:

div.menu {
padding-left: 10%;
padding-right: 10%;
margin: 0px;
background:lightcyan; //for visualization only
}

.menu ul {
text-align: center;
margin: auto;
padding: 0px;
}

.menu ul li {
display:inline-flex;
list-style-type: none;
width: 128px;
height: 77px;
margin: 0px;
padding: 0px;
text-align: center;
background:lightblue; //for visualization only
align-items:center;
justify-content:center;
}

.menu ul li a {
align-self:center;
}

Check the JSfiddle https://jsfiddle.net/r2gnkknv/

You will end with this:
enter image description here

How to center an unordered list?