Question

我无法将文字相对于网页的宽度居中，在设置为浮动到页面左侧的图片旁边。

以下是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;
}

我目前正在看到图像浮动到我想要的左侧，但是文本（在＆＃34;标题＆＃34;类中）也浮动到图像旁边的左侧。任何帮助将不胜感激！

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

Answer 2

这是一种在不修复.header宽度的情况下执行此操作的方法。目前尚不清楚应该在哪里涂上背景颜色（黑色）。

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: