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
How to Add a Tool Tip to a Span Element
A Href Link for Entire Div in HTML/Css
How to Embed a Google Drive Folder in a Website
Make <Body> Fill Entire Screen
What Is the HTML For="" Attribute in <Label>
Is Cross-Origin Postmessage Broken in Ie10
Uppercase or Lowercase Doctype
Allow Specific Tag to Override Overflow:Hidden
What Is the ::Content/::Slotted Pseudo-Element and How Does It Work
Easiest Way to Extract the Urls from an HTML Page Using Sed or Awk Only
Html5 Doctype Putting IE9 into Quirks Mode
How to Make a Chevron Arrow Using CSS
$Http Doesn't Send Cookie in Requests
Setting a Width and Height on an a Tag
How to Prevent Line Break at Hyphens in All Browsers
Internet Explorer 11 Disable "Display Intranet Sites in Compatibility View" via Meta Tag Not Working