CODEWITHSUNDEEP
htmlcss
Doug Smith
Doug Smith

Reputation: 29316

Why won't my unordered list centre properly?

It seemingly attempts to centre, but in actuality is a few pixels off. It's really annoying.

Picture: https://i.sstatic.net/BiXf8.png

My code:

HTML: 

<body>
        <div class="menu-bar">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Work</a></li>
                <li><a href="#">Contact</a></li>
            </ul>   
        </div>

        <div class="greeting"></div>
    </body>

CSS:

.menu-bar {
    font-family: 'Lucida Grande';
}

.menu-bar ul {
    text-align: center;
    list-style-type: none;
}

.menu-bar li {
    display: inline;
}

.greeting {
    background: url('../media/pic.jpg');
    border: 1px solid black;
    margin-top: 75px;
    margin-left: auto;
    margin-right: auto;
    width: 500px;
    height: 375px;
}

Very frustrating. >_<

Upvotes: 0

Views: 1204

Answers (2)

The Alpha
The Alpha

Reputation: 146191

Margin and Padding both needs to be set to 0 unless you are using a css reset to avoid browser inconsistencies.

.menu-bar ul {
    text-align: center;
    list-style-type: none;
    margin:0;
    padding:0;
}

DEMO.

Upvotes: 3

TomDunning
TomDunning

Reputation: 4877

UL has a default left margin which you haven't dealt with. Just add margin: 0;

Upvotes: 1

Related Questions