이 CSS를 사용하여 내 CSS를 헤더 응답

Question

임을 만드는 방법 : 내 헤더

#header-topbar { 
    width:100%; 
    height:120px; 
    padding-top:5px; 
} 
#header-right-content { 
    float:right; 
    margin-right:14%; 
    margin-top:20px; 
    font-size:20px; 
    text-align:right; 
    color:#000000; 
} 
#logo { 
    position: absolute; 
    float: left; 
    margin-left: 15%; 
    margin-top: 25px; 
    width: 360px; 
    height: 50px; 
} 

하고 내가 그것을 반응 만들고 싶어. 나는 미디어 쿼리를 사용하는 방법을 알고 있지만 메신저의 나머지 부분에 대해서는 확실하지 않습니다.

어떻게 로고 div가 가운데에 표시되고 아래에 표시되는 텍스트에 표시됩니까? http://jsfiddle.net/bMsMw/ 그래서 당신이 HTML을

감사

이 같이

Answer 1

을 볼 수

내가 여기에 바이올린을 만들었습니다? http://jsfiddle.net/bMsMw/1/ 이미지가 어울리는 지 정확히 알지 못합니다.

code 

Answer 2

체크 #header-topbar이 demo

media query 높이에서 조작하기 쉬운 수 있도록해야하지 상태, #logo에서
한 이유는 position:absolute 왜 당신의 로고 때문에 내려 가지 이유 이유가있다 absolute:position은이 도움말 요소의 상단에 당신을

#header-topbar { 
    float:left; 
    width:100%; 
    padding-top:5px; 
} 
#header-right-content { 
    float:right; 
    margin-right:14%; 
    margin-top:20px; 
    font-size:20px; 
    text-align:right; 
    color:#000000; 
} 
#logo { 
    float: left; 
    margin-left: 15%; 
    margin-top: 25px; 
    width: 360px; 
    height: 50px; 
} 
#logo img { 
    max-width:100%; 
    width:100%; 
} 
@media handheld, screen and (max-width: 620px){ 
    #logo{ 
     width:70%; 
     float:none; 
     margin-left:auto; 
     margin-right:auto; 
    } 
    #header-right-content { 
     float:left; 
     width:100%; 
     text-align:center; 
    } 

} 

희망을 표시 ..