CODEWITHSUNDEEP
htmlcssalignmenthtml-lists
ohmagard
ohmagard

Reputation: 140

HTML/CSS Un-ordered list Center Alignment

I am a first time HTML user and need help to center my current navigation bar:

https://i.sstatic.net/czpJr.jpg

The code for it is as follows:

<!DOCTYPE html>
<html>
    <head>
        <title>large background</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css" />

    </head>
    <body>
        <!div class="navBar">

            <ul>
                <li><a href="#about"><h2>ABOUT</h2></a></li>
                <li><a href="#home"><img src="ICON.jpg" width="60" height="60"></a></li>
                <li><a href="#music"><h2>MUSIC</h2></a></li>
            </ul>

        <!/div>
    </body>
</html>

With the relevant parts of the external stylesheet in this image(couldn't get it to work as a code block - noob me):

https://i.sstatic.net/JaIah.jpg

Please help me work out to make this navigation bar appear in the center of the page, and not on the left. I have tried changing the float left in the CSS but all is does is make the nav bar appear vertically not horizontally, and it still appears on the left :(

Thanks, Sam

Upvotes: 1

Views: 602

Answers (2)

Danillo Felixdaal
Danillo Felixdaal

Reputation: 585

U can center your element like this(see example below: with the text align center on the ul). u could also, provide a width to the ul, for example 300px , and then add margin:0 auto; margin auto won't work on a block element without setting its width. or you should use inline-block;

(http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/)

Ps As h1 is a block element and a is an inline element the correct way is 

    <h1><a href="#">This is a title</a></h1>

, when using the header.

Though because is a block element it will take up all available space, meaning, all list items will still be underneath eachother, so specify the space it should take. 

header nav ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
}

header nav ul li { 
    display: inline; 
}

header nav ul li a {
    text-decoration: none;
}
<html>
    <head>
        <title>large background</title>
    </head>
    <body>
        <header>
            <nav>
                <ul>
                    <li><a href="#about">ABOUT</a>
                    <li><a href="#home"><img src="ICON.jpg" width="60" height="60"></a>
                    <li><a href="#music">MUSIC</a>
                </ul>
            </nav>
        </header>
    </body>
</html>

I suggest reading about: http://learnlayout.com/display.html

Hope this helps you a bit.

Upvotes: 0

Drodarious
Drodarious

Reputation: 94

to comment out HTML use this syntax (you're missing the dashes):

<div> this WILL show and be rendered </div>
<!--div> this WILL NOT show or be rendered </div-->

adding "float: left" to the li elements is forcing your elements to align to the left. To get the nav items to appear horizontally, use "display: inline-block;" instead. Also, you are using "align"... it shoudl be "text-align".

Example in codepen!

http://codepen.io/Drodarious/pen/bdmavb

Upvotes: 1

Related Questions