Trying to center an unordered list
On my website, I want a horizontal menu that is centered on the page. Thus, the entire menu must be centered.
At this point, I can create a horizontal list, but the list still remains on the left. I want it to be focused.
Can someone please tell me what to change in my code to keep it focused?
My HTML:
<div class=menu>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="index.html">Home</a></li>
<li><a href="index.html">Home</a></li>
<li><a href="index.html">Home</a></li>
</ul>
</div>
My CSS:
ul {
text-align: center;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
div.menu{
display: table;
}
div.menu a {
display: block;
margin-left: auto;
margin-right: auto;
width: 60px;
color: navy;
background-color: #FF0000
}
li{
float: left;
}
source to share
Add margin:auto
to yours div.menu
to execute this
div.menu{
display: table;
margin:auto;
}
JSFiddle: http://jsfiddle.net/0xb7j9zc/
source to share
Have a look at this fiddle http://jsfiddle.net/ByShine/33sz6nrt/4/
Html
<div class="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="index.html">Home</a></li>
<li><a href="index.html">Home</a></li>
<li><a href="index.html">Home</a></li>
</ul>
</div>
CSS
ul {
text-align: center;
}
ul li {
display: inline-block;
}
source to share
I am assuming that you want to center the menu (align it to the middle of the page). One approach, and I'm sure there are several out there, is to wrap the "menu" div in another tag div
and set the attribute align
to center
, for example:
<div align="center">
<div class=menu>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="index.html">Home</a></li>
<li><a href="index.html">Home</a></li>
<li><a href="index.html">Home</a></li>
</ul>
</div>
</div>
Here's an example: http://jsfiddle.net/q9ae01qe/
source to share