CODEWITHSUNDEEP
htmlcss
Himanshu Yadav
Himanshu Yadav

Reputation: 13585

Div filled with background color as topbar

I am trying to show a horizontal top bar with logo image in the middle of it. Image is on the left of the page and vertically in the center. How would I get image at center of the topbar? Here is my code:

<div class='topbar'>
        <img src="../../img/headerlogo.png" class="topbarlogo"/>
    </div>

CSS:

div.topbar {
    height: 80px;
    width: 100%;
    background-color: #000000;
    margin-top: 0px;

}
.topbarlogo {
    display: block;
    position: absolute; 
}

Upvotes: 1

Views: 1442

Answers (3)

j08691
j08691

Reputation: 207913

Get rid of the rules for .topbarlogo and simply set the text-align:center rule for your div.

jsFiddle example

Upvotes: 1

Mat Richardson
Mat Richardson

Reputation: 3606

You've spelt your class wrong in the css, 'topbor' should be topbar.

Additionally add:-

margin-left: auto;
margin-right: auto;

Upvotes: 2

Aaron Lee
Aaron Lee

Reputation: 1156

You need to clear the floats. Create the following div below:

<div style="clear:both;"></div>

Should do the trick.

Upvotes: -2

Related Questions