html - float 图像 CSS HTML 后水平居中文本

Question

我无法将文本相对于我的网页宽度居中，紧挨着设置为 float 到页面左侧的图像。

这是 HTML 代码:

<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>

这是 CSS 代码:

.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;
}

我目前看到图像如我所愿地向左浮动，但文本(在“header”类中)也向左浮动，紧挨着图像。 任何帮助将不胜感激!

Answer 1

将此添加到您的 CSS:

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

并删除:

clear:both
display:inline

会给你:

.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