CODEWITHSUNDEEP
htmlcsscentering
Thomas
Thomas

Reputation: 37

Centering header (includes logo & navigation)

I'm working on the header of a website. I've looked around stackoverflow for instructions on how to center the header (includes logo & navigation bar).

I'm using Dreamweaver CC and when I click the preview button, it shows up on the browser centered, but the right has more white space than the left.

My current CSS: 

.container { 
    width: 1000px; 
    margin-right: auto;
    margin-left: auto;
    text-align: center; 
}

.header_left { 
    float: left; 
    width: 300px;
}

.navi { 
    float: right; 
    width: 600px;
}

.navi li {
    list-style: none;
    display: inline;
}

My Current HTML:

<body id="home">
    <div id="header">
        <div class="container">
            <div class="header_left">
  <a href="#"><img src="../images/bestfoodservicesweb_04.jpg" width="208" height="69"/></a>
        </div>
            <div class="header_right">
                <ul class="navi">
                    <li><a href="#"><img src="../images/bestfoodservicesweb_07.jpg" width="88" height="56"/></a></li>
                    <li><a href="#"><img src="../images/bestfoodservicesweb_09.jpg" width="88" height="56"/></a></li>
                    <li><a href="#"><img src="../images/bestfoodservicesweb_11.jpg" width="88" height="56"></a></li>
                    <li><a href="#"><img src="../images/bestfoodservicesweb_13.jpg" width="88" height="56"></a></li>
                </ul>
                    <div style="clear: both"></div>
            </div>
   </div>

EDIT: Sample of what it looks like

Upvotes: 0

Views: 348

Answers (5)

Derek Henderson
Derek Henderson

Reputation: 9706

I believe this is what you are looking for:

.container {
    margin: 0 auto;
    text-align: center;
}
.header_left {
    display: inline-block;
}
.header_right {
    display: inline-block;
}
.navi { 
    display: inline-block;
    padding: 0;
}
.navi li {
    list-style: none;
    display: inline;
}

Demo

Basically, I've removed floats and widths and padding, used display: inline-block;.

Upvotes: 1

Derek Story
Derek Story

Reputation: 9583

Trying to understand the problem. The header as a whole is centered. The elements inside have margin issues due to specifying width on the images and then giving the class a different width as well. You can remove the width in the class and it will push each floated element flush to the their specified sides. Then add margin to push them the distance you would like:

body, html {
    width: 100%;
    height: auto;
    margin: 0;
}
.container {
    background: #333;
    width: 1000px;
    margin: auto;
    text-align: center;
}
.header_left {
    float: left;
    margin-left: 70px;
    margin-top: 12px;
}
.navi {
    float: right;
    margin-right: 60px;
}
.navi li {
    list-style: none;
    display: inline;
}

http://jsfiddle.net/derekstory/zz2Dy/3/

Upvotes: 2

Zach Harvey
Zach Harvey

Reputation: 71

<img src="../images/bestfoodservicesweb_07.jpg" style=" display: block;
margin-left: auto;
margin-right: auto;"/>

Upvotes: 0

bfuoco
bfuoco

Reputation: 715

The right header element has the property text-align: center, and it doesn't occupy the entire width of the element, so it ends up with more white space on the right. If you add to your fiddle the class:

.header_right {
    text-align: right;
}

That should remove the white space on the right.

(if I understood your issue properly)

Upvotes: 1

G-Cyrillus
G-Cyrillus

Reputation: 105853

text-align:center and float don't make good friends :)

test this : setting ul as inline-block element and not floatting: http://jsfiddle.net/zz2Dy/2/ 

.container { 
    width: 1000px; 
    margin-right: auto;
    margin-left: auto;
    text-align: center; 
    background:#333;
}

.header_left { 
    float: left; 

}

.navi { 
    display:inline-block;
    padding:0;
    margin:0;

}

.navi li {
    list-style: none;
    display: inline;
}

Upvotes: 1

Related Questions