浮动图像CSS HTML之后的水平居中文本

彼得豪

我在将文字浮动到页面左侧时，在将文字相对于网页宽度居中时遇到麻烦。

这是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”类中）也在图像的左侧向左浮动。任何帮助将非常感激！

丹尼尔·斯坦利

将此添加到您的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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。