Search code examples
cssalignmentcentering

How to center align logo image and right align navigation ul

Both the logo and navigation are in a header div and I'd like to have the logo centered while the navigation is aligned to the right.

I've tried doing display:block and margin: auto for the image which gets it centered, but then it pushes the navigation down to the next line.

Current css is: 

.logo {
    display: inline-block;
    width: 400px
    margin: 0 auto;
}

/* Navigation */

#nav {
    display: inline-block;
    margin: auto; 
    padding:0; 
    list-style:none;
    float: right;
}

Read that I had to put width in to make margin:auto work but all it does is enlarges the image. Thanks.

Solution

  • Remove float from your #nav & define text-align:center to it's parent. Write like this:

    .header{
 text-align:center;
}
.logo {
    display: inline-block;
    width: 400px
}

/* Navigation */

#nav {
    display: inline-block;
    padding:0; 
    list-style:none;
    text-align:left;
}