CSS h1 위치 지정

나침반 로고 옆에 흰색 DIV 안에 "Test"라는 텍스트가 표시되도록하려고합니다. 여기에서 내가 뭘 잘못하고 있는지 또는이 문제를 해결하는 방법을 모르겠습니다. 내 CSS의 다음 http://imgur.com/y1Jan8B CSS h1 위치 지정

: 사전에

<div id="nav"> 
    <img class="logo" src="images/compass.png" alt="Compass" /> 
    <h1 class="title">Test</h1> 
</div>

감사

#nav{ 
clear: both; 
margin-top: 20px; 
background-color: #FFF; 
width: 45%; 
height: 75px; 
margin-right: auto; 
margin-left: auto; 
border-radius: 5px; 
-webkit-box-shadow: 0px 6px 5px 0px rgba(48, 50, 50, 0.46); 
-moz-box-shadow: 0px 6px 5px 0px rgba(48, 50, 50, 0.46); 
box-shadow:   0px 6px 5px 0px rgba(48, 50, 50, 0.46); 
} 
img.logo{ 
margin-top: -15px; 
display: inline; 
} 
h1.title{ 
font-family: 'Lato', sans-serif; 
font-weight: 900; 
font-size: 2.5em; 
color: #FFEA00; 
display: inline; 
}

및 HTML

출처

2014-12-16 stanced

, 분명 당신이 도움이 될 수 없습니다. – EternalHour

그리고 부정적인 여백을 사용하고 있습니다 .... –

@ Bhojendra-C-LinkNepal 동일한 결과를 얻으려면 적절한 대안이 무엇입니까? – stanced

이미지가 h1 위에 표시 할 얻으려면 여기에 무엇을 같이 찾고의 이미지입니다 , 당신은 단지 이미지 자체에 position:absolute;을 적용 할 필요가 있습니다. 그러면 불필요한 CSS를 제거 할 수 있습니다 :)

여기에 행동에 그것의 Fiddle있어

CSS

그냥 텍스트가 그것의 반대를 배치하여 position:absoluteremoves the target element from it's position in the semantic flow (느슨하게 말하기)와 같은 이미지 아래에 이동 할 수 있도록 position:absolute 필요 가장 가까운 위치 지정된 조상

img.logo{ 
    /*margin-top: -15px;*/ 
    /*display:inline;*/ 
    position:absolute;

}

당신은 너무 다른 CSS의 일부를 제거 할 수 있습니다 : 당신은 CSS에서 아무것도 부동하지 않는

h1.title{ 
    font-family: 'Lato', sans-serif; 
    font-weight: 900; 
    font-size: 2.5em; 
    color: red; 
    /*display: inline;*/ 
    /*margin-top: -500px;*/ 
}

출처

2014-12-16 01:43:00 Timmah

내 문제를 해결, 감사합니다! – stanced

CSS h1 위치 지정

답변

관련 문제