CODEWITHSUNDEEP
htmlcss
gooper20
gooper20

Reputation: 79

Trying to center an unordered list

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

Answers (3)

Simply Craig
Simply Craig

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

Qrious
Qrious

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

Aaron
Aaron

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

Related Questions