웹 브라우저의 크기를 조정할 때 이미지/버튼을 그대로 유지하는 방법

Question

내 웹 사이트의 이미지 버튼입니다. 여기에 내 코드

HTML

<div class="Nav"> 
    <div id="buttons"> 
     <a href="/"><div id="home_button"></div></a> 

CSS입니다

http://puu.sh/cK7VU/f17dafcc41.jpg 여기 http://puu.sh/cK7Sf/6309c39cdb.jpg 나는 다시 크기의 브라우저가 간다

#home_button { 
background-image: url("home.png"); 
background-repeat:no-repeat; 
background-size: 100%; 
width: 150px; 
height: 60px; 
position: absolute; 
top: 196px; 
left: 502px; 
z-index: 10; 
} 

Answer 1

이유는 left: 502px;

입니다

당신은 다음과 같은 예를 들어, div id="buttons"을 중심으로해야합니다

이

.Nav { 
display: flex; 
} 
#buttons { 
margin: 0 auto; 
} 
#home_button { 
background-image: url("home.png"); 
background-repeat:no-repeat; 
background-size: 100%; 
width: 150px; 
height: 60px; 
} 

이 동적 웹 사이트가 왼쪽

Answer 2

에있을 것입니다 .Nav 및 #home_button 내부 #buttons을 중심합니다, 당신은 흐르는 요소가 필요, 절대적인 요소가 아닙니다. http://www.w3schools.com/cssref/tryit.asp?filename=trycss_position_absolute 이 링크에서는 제목이 절대 위치로 지정되었으므로 제목에 고정되어 있음을 알 수 있습니다.

흐르는 요소에 대해 원하는대로. 이 시도;

HTML - (이 목록이기 때문에) 모든 리튬의와 'A'당신의 버튼 내 사업부를 대체

<ul> 
    <li id='HomeButton'><a href='#'></a></li> <!-- Duplicate this line with as many links as you want --> 
</ul> 

CSS 또한

#buttons ul { 
    float: none; 
    clear: both; 
} 
#buttons li { 
    float: left; 
} 
#HomeButton { 
    background: url("home.png") no-repeat; 
    backgroound-size: 100%; 
    width: 150px; 
    height: 60px; 
} 

: 코드를 더욱 효율적이고 깨끗한 만들려면 읽기,이 링크로 이동하여 하단 섹션 'Background shorthand'보기 http://www.w3schools.com/css/css_background.asp - 입력 및 읽기 모두에서 속기 코딩이 빠릅니다.

예 : URL ("home.png") 더 반복;

background-image: x 
background-repeat: x 

는보다 느린 배경입니다