How to Center an Unordered List

How to center an unordered list?

ul {  display: table;  margin: 0 auto;}

<html>
<body>  <ul>    <li>56456456</li>    <li>4564564564564649999999999999999999999999999996</li>    <li>45645</li>  </ul></body>
</html>

How to center an unordered list

You can do that using flex, like this:

ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  list-style-type:none;
}

You can also try space-around value for justify-content property, and items will have space before, between, and after them.

Here is the working example: https://jsfiddle.net/tLc9zmoy/26/

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.

How center unordered list with bullets?

Try this one

div{  text-align:center;}ul{  display:inline-block;  text-align:left;}

<div style="text-align:center;">    <h2 style="margin-top:43px;" class="text-center">Important years of life and work:</h2>    <ul >      <li>cat nip</li>      <li>laser pointers</li>      <li>lasagna</li>    </ul>  </div>

How do I center an unordered list?

<li> runs as a text element because of your css .navbar ul li { display: inline-block; }. therefor you can center it with text-align. In this case just add: .navbar { text-align: center; }

.navbar {
  margin: 0 auto;
  width: 100%;
  text-align: center;
}

.navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: white;
}

.navbar ul li {
  display: inline-block;
}

li a {
  display: block;
  color: black;
  text-align: center;
  padding: 12px 16px;
  font-size: 25px;
  text-decoration: none;
}

<div class="navbar">
  <ul>
    <li><a href="#">The Stock</a></li>
    <li>
      <a> <img style="height: 50px; width: 50px" src="img/logo.svg" alt="logotype" /> </a>
    </li>
    <li><a href="#">The Stock</a></li>
  </ul>
</div>

Centering an unordered list

Change the position property of your div to absolute or relative. Then you should be able to position it. Then use margin: auto to put it in center.

position: relative;
margin: auto;

Adding this to your your css or

position: absolute;
left: 400px; //<!--Change this to position it manually-->

How to horizontally center an unordered list of unknown width?

The solution, if your list items can be display: inline is quite easy:

#footer { text-align: center; }
#footer ul { list-style: none; }
#footer ul li { display: inline; }

However, many times you must use display:block on your <li>s. The following CSS will work, in this case:

#footer { width: 100%; overflow: hidden; }
#footer ul { list-style: none; position: relative; float: left; display: block; left: 50%; }
#footer ul li { position: relative; float: left; display: block; right: 50%; }

Center unordered list in DIV

Your HTML is incorrect. The <a> tags should be inside the <li> tags. To make the list items be inline, set float: left on them, and overflow: hidden to the <ul> so it fits its children. Remove the float on .nav-container, its unecessary. Take a look at this codepen.

And the nav moves when you change its width because it you centered the wrapper but not the nav itself. You can remove width and margin: 0 auto and try:

.nav-container {
    text-align: center;
}
.nav-container ul {
    display: inline-block;
}

How Make a div with Unordered list in Center bootstrap?

Below you'll see examples of centering lists with bootstrap and without bootsrap.

In the first example, I'm centering using the concept of bootstrap columns. You know bootstrap grids interpret 12 columns as the fullscreen, so I'm essentially saying fit the list in a 6 column, that has an offset of 3 columns ( (12 - 6)/2 = 3).

In the second example, which is my preferred method I'm using flexbox. justify-content center pretty much tells the elements to horizontally center relative to their parent div. (the div in which the flexbox was called on)

h4 {  text-align: center;}
.list {    display: flex;  justify-content: center;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">  <h4>Centering unordered lists with bootstrap columns</h4>  <div class="col-xs-6 col-xs-offset-3">    <ol>      <li>Lorem ipsum blah blah blah</li>      <li>Lorem ipsum blah blah blah</li>      <li>Lorem ipsum blah blah blah</li>      <li>Lorem ipsum blah blah blah</li>      <li>Lorem ipsum blah blah blah</li>      <li>Lorem ipsum blah blah blah</li>    </ol>  </div></div><hr><br><hr><div class="no-bootstrap">  <h4>Centering unordered lists without boostrap</h4>  <div class="list">    <ol>      <li>Lorem ipsum blah blahsdfadsf blah</li>      <li>Lorem ipsum blah blah blah</li>      <li>Lorem ipsum blah blah blah</li>      <li>Lorem ipsum blah bdfasdfasdflah blah</li>      <li>Lorem ipsum blah blah blah</li>      <li>Lorem ipsum blah blah blah</li>    </ol>  </div></div>