센터 이미지 정렬

Question

어떻게 이미지를 div에 수직 및 수평으로 정렬 할 수 있습니까?

이미지 크기가 일정하지 않으므로 높이나 패딩을 고정하지 않고이 값을 가져와야하므로 모든 이미지에서 유연해야합니다.

가 여기에 이미지를 정렬 센터 내 흔적 http://jsfiddle.net/yHdAx/2/

Answer 1

이봐, 지금이

같이 귀하의 사업부에 table-cell 속성에 사용 할 수 있습니다 HTML

라이브 데모http://jsfiddle.net/yHdAx/3/

HTML

<div style="height:800px; background-color:#CCC"> 
<div class="test"> 
<img src="http://static.clickbd.com/global/classified/item_img/607724_0_original.jpg" /> 
</div> 

CSS는

.test{ 
background-color:red; 
height:600px; display:table-cell; vertical-align:middle; 
    text-align:center; 
} 
.test img{ 
max-width:50%; 

} 

Answer 2

, 당신은 그것을 차단하는 표시 한 다음 왼쪽과 자동으로 오른쪽 여백의 설정해야합니다. 또한 새로운 코드 예제에서 위쪽 여백과 아래쪽 여백으로이 작업을 수행했습니다. 다음은이 작업을하기 위해 필요한 코드입니다 :

CSS는

.test { 
    background-color:#999; 
    height:60%; 
    display:block; 
    vertical-align:middle; 
    padding-top: 25%; 
    padding-botton: 25%; 
} 

.test img { 
    max-width:50%; 
    vertical-align: ; 
    display: block; 
    margin: auto auto auto auto; 
} 

<div style="height:800px; background-color:#CCC"> 
    <div class="test"> 
     <img src="http://static.clickbd.com/global/classified/item_img/607724_0_original.jpg" /> 
    </div> 
</div> 

Answer 3

http://www.brunildo.org/test/img_center.html 이미지에 display:block을 적용하고 auto에 마진을 설정 추가 정보를 원하시면. 여기

.test { 
    background-color:#999; 
    padding: 50px 0; 
} 

.test img { 
    display: block; 
    margin: auto; 
} 

는 바이올린입니다 http://jsfiddle.net/yHdAx/5/

Answer 4

당신이 다음 컨테이너 div에 것 사이트 디자인 휴식을 높이를 설정하지 않으면?

은 그냥 하나 개의 사업부로 재생하려고

.test img { 
    display:block; 
    width:25%; 
    margin:0 auto; 
} 

Answer 5

사용하여 이미지를 중앙에

div { 
    display:table-cell; 
    background:red; 
    width:500px; 
    height:500px; 
    vertical-align:middle; 
    text-align:center; 
} 

나는이 또한 당신을 도움이되기를 바랍니다 : - http://jsbin.com/ihunuq/3/edit가

Answer 6

당신은 위치를 사용할 수 있습니다 : 절대. 이와 비슷한 것 : jsfiddle.

.test{ 
    background-color:#999; 
    height:60%; 
    width: 100%; 
    position: relative; 
} 
.test img{ 
    max-width:50%; 
    position: absolute; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    margin: auto; 
}