How to Horizontally Center an Unordered List of Unknown Width

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%; }

Centering horizontal unordered list without it having a fixed width

Won't this do the trick?

ul{
list-style:none;
width:100%;
text-align:center;
}
li{
display:inline-block;
}

Fiddle

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>

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-->

Centering with unknown width

Just another approach using "Theodore K." snippet

Demo

.horz-vert-center {  width:50%;  margin: auto;  border: 1px #000 solid;  text-align: center;}.horz-vert-center li{  display: inline-block;  float: none;}
*{margin:0;padding:0;}
<ul class="horz-vert-center">  <li>About</li>  <li>Work</li>  <li>Blog</li>  <li>Journal</li></ul>

How to center a ul CSS

It really depends on what you're trying to do, your constraints and how you are trying to build your site but for me setting text-align:center; on your #nav element centers all of the individual menu elements relative to which row they appear on.

You can read more here if you need to get into the finer arts of it: https://css-tricks.com/centering-list-items-horizontally-slightly-trickier-than-you-might-think/

But as they say this is pretty simple in modern HTML. It's only if you need to support older browsers for some reason or some other quirky setup that it gets more complex.



Related Topics



Leave a reply



Submit