Reputation: 79
On my website, I want a horizontal menu, which is centered on the page. So, the whole menu should be centred.
At this moment, I can create a horizontal list, but the list still stays at the left side. I want it centered.
Can someone please tell me what to change in my code to center it?
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;
}
Upvotes: 3
Views: 101
Reputation: 1114
Add margin:auto
to your div.menu
to accomplish this
div.menu{
display: table;
margin:auto;
}
JSFiddle: http://jsfiddle.net/0xb7j9zc/
Upvotes: 2
Reputation: 677
I'm assuming you wish to center the menu (align it to the middle of the page). One approach, and I'm sure there's a few out there, is to wrap the 'menu' div into another div
tag and set the align
attribute to center
, like so:
<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/
Upvotes: 0
Reputation: 1208
Check out 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;
}
Upvotes: 1