CODEWITHSUNDEEP
htmlcss-floatcss
petehallw
petehallw

Reputation: 1014

Horizontally center text after floating image CSS HTML

I am having trouble centring text relative to the width of my webpage, next to an image which is set to float to the left of the page.

Here is the HTML code:

<div class="header_img">
    <a href="index.php" class="head"><img border="0" src="images/logo.png" alt="Home" width="200" height="35"></a>
</div>
<div class="header">
    <a href="index.php" class="body">HOME</a><a href="contact.php" class="body">CONTACT</a>
</div>

And here is the CSS code:

.header {
    background:#000000;
    font-size: 150%;
    color: #666666;
    font-family: ProximaNovaLight, Proxima Nova Light;
    clear: both;
    text-align: center; 
    display:inline;
}

.header_img {
    float: left;
}

I am currently seeing the image floating to the left as I wanted, but the text (within the "header" class) is also floating to the left, next to the image. Any help would be much appreciated!

Upvotes: 0

Views: 1192

Answers (2)

Daniel Stanley
Daniel Stanley

Reputation: 1050

Add this to your CSS:

.header { width: 40%; margin: 0 auto; }

and remove:

clear:both
display:inline

will give you:

.header_img {
    float: left;
}
.header {
    background:#000000;
    font-size: 150%;
    color: #666666;
    font-family: ProximaNovaLight, Proxima Nova Light;
    text-align: center;
    margin: 0 auto;
    width: 40%;
}
<div class="header_img">
    <a href="index.php" class="head">
        <img border="0" src="images/logo.png" alt="Home" width="200" height="35"/>
    </a>
</div>
<div class="header">
    <a href="index.php" class="body">HOME</a><a href="contact.php" class="body">CONTACT</a>
</div>

jsFiddle

Upvotes: 1

Marc Audet
Marc Audet

Reputation: 46785

Here is a way to do it without fixing the width of the .header. It is not clear where the background color (black) should be painted.

.header {
    background:#000000;
    font-size: 150%;
    color: #666666;
    font-family: ProximaNovaLight, Proxima Nova Light;
    text-align: center; 
    display:block;
    width: auto;
    height: 35px; /* match image ? */
}

.header_img {
    float: left;
}
<div class="header_img">
    <a href="index.php" class="head"><img border="0" src="http://placehold.it/200x35" alt="Home" width="200" height="35"></a>
</div>
<div class="header">
    <a href="index.php" class="body">HOME</a><a href="contact.php" class="body">CONTACT</a>
</div>

Upvotes: 0

Related Questions