떠 다니는 이미지의 가로 가운데에 텍스트가 있습니다. CSS HTML

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

하지만, 텍스트 "머리글"클래스)도 이미지 옆에 왼쪽으로 떠 있습니다. 도움이 될 것입니다.

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

을 제거 :

Answer 1

당신의 CSS이 추가

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의 너비를 고정하지 않고 수행하는 방법입니다. 배경색 (검정색)을 칠해야하는 위치가 명확하지 않습니다.

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