浮動圖像之後水平居中文本CSS HTML

我無法使文本相對於網頁的寬度居中，而是在設置爲浮動到頁面左側的圖像旁邊。浮動圖像之後水平居中文本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; 
}

我目前看到的圖片浮動到左邊，因爲我想要的，但文本（內「標題」類）也浮動到圖像旁邊的左側。任何幫助將不勝感激！

來源

2014-09-24 petehallw

你可以放置IMG在同一div並使用文本對齊文本：中心; 。但是，讓它響應是另一回事...... – 2014-09-24 13:12:47

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

來源

2014-09-24 13:20:41

以下是一種不固定.header寬度的方法。目前還不清楚背景顏色（黑色）應該塗在哪裏。

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

來源

2014-09-24 13:33:27

浮動圖像之後水平居中文本CSS HTML

回答

相關問題