브라우저 창 크기에 관계없이 이미지를 페이지 중앙에 유지하려면 어떻게합니까?

Question

CSS + HTML 만 사용하여이 작업을 수행하고 싶습니다. IE 6이 아닌 모든 주요/최신 브라우저에서 작동해야합니다.

<div id="left_arrow"> 
     <img src="images/left-arrow.png"> 
    </div> 

#left_arrow { 
    position: absolute; 
    left: 0px;   
    margin: 10px 0 15px 0; /* top, right, bottom, left */ 
    padding: 5px 5px 7px 5px; /* top, right, bottom, left */ 
} 

내가 '절대'로 위치 하 고했지만, 브라우저 크기가 변경되면 화살표가 움직이지 않고 내가 항상에서 할 것을 권장합니다

는 다음과 내가 가진 코드가 될 때 크기에 관계없이 브라우저의 중심.

편집 :

나는 항상이 사업부의 중심에되고 싶은 :

<div id="images" width="100%"> 
     <img src="image1.jpg" width="45%"> 
     <img src="image2.jpg" width="45%"> 
</div> 

이가 내 코드의 전체 블록 :

<div id="compare_view" align="center"> 

    <div id="compv-navbar"> 
     <a href="#"><img src="icon1.png" id="icon1"></a> | 
     <a href="#"><img src="icon2.png" id="icon2"></a> | 
     <a href="#"><img src="icon3.png" id="icon3"></a> | 
     <span id="view_name"> text </span> 
    </div> 

    <div id="left_arrow"> 
     <img src="images/left-arrow.png"> 
    </div> 

    <div id="right_arrow"> 
     <img src="images/right-arrow.png"> 
    </div> 

    <div id="images" width="100%"> 
     <img src="image1.jpg" width="45%"> 
     <img src="image2.jpg" width="45%"> 
    </div> 

    <div id="notice"> 
     Notice will be here. 
    </div> 

</div> 

편집 2 : CSS 솔루션이 없다면 jQuery 솔루션도 좋습니다.

편집 3 : 아직 수취인이 없습니까? 범프

Answer 1

나는 수평 맞춤을 위해 "text-align : center"를 사용했다. 수직 중심,이 시도 : 당신이 이미지의 주변에 더 위치가있는 경우

.vBox {min-height: 12em; display: table-cell; vertical-align: middle; } 

<div class="vBox"> <p>Lorem Ipsum is simply dummy text </p> </div> 

건배, 에릭