해당 부서의 센터 이미지

Question

저는 (different width and height) 인 부분 (same width and height)을 가지고 있습니다. 나는 그 부서의 내부 이미지를 중심으로하려고 노력한다. 그래서 사용

{ text-align: center} 

여기 이미지가 가운데이지만 최고 값은 변경되지 않습니다.

여기 예를 들어 정확하게 필요한 이미지.

다음

내가 시도 무엇 jsfiddle

. 나는 너의 충고를 기다리고있다. 감사합니다.

Answer 1

display:table-cell을 사용하면 내부 이미지를 div의 가운데에 정렬 할 수 있습니다.

그러나이 경우 당신은 margin div 힘 table-cell 때문에이 td 역할을하고 기술적으로 테이블 td에 마진을 제공하지 못할 줄 캔트.

그래서 흰색으로 div에 테두리를 추가했습니다.

CSS

.background-image{ 
    width: 150px; 
    height: 160px; 
    background: #C8BFE7; 
    text-align: center; 
    display:table-cell; 
    vertical-align:middle; 
    border:white 5px solid 
} 
​ 

DEMO

---------------------------- - 또는 ----------------------------------------

수 있습니다. 각 div에 외부 div를 추가하고 outer div에 여백을 지정하십시오.

CSS

.outer{margin: 0 0 10px 10px; display:inline-block} 
.background-image{ 
    width: 150px; 
    height: 160px; 
    background: #C8BFE7;  
    text-align: center; 
    display:table-cell; 
    vertical-align:middle; 
} 
​ 

DEMO 2