컨테이너를 오버플로하는 이미지를 가로로 가운데에 맞 춥니 다.

Question

컨테이너 div를 오버플로하는 일부 이미지를 가운데로 정렬하려고합니다.

컨테이너 (및 이미지)는 높이가 160px이므로 작은 화면 크기에서도 높이를 유지하고 싶지만 이미지를 수평 중심으로 유지해야합니다.

나는 행운이없는 margin: 0 auto;을 사용해 보았습니다.

나는 이미지 자체에 margin: 0 -100%;과 함께 컨테이너 div에 text-align: center;을 사용하도록 제안 된 절반 해결책을 발견했습니다. 그러나이 솔루션은 웹킷 기반 브라우저에서만 작동하는 것으로 보입니다.

예 : 파이어 폭스 결과는 이것이다 :

HTML :

<div class="row-fluid"> 
    <div class="span6"> 
     <a> 
      <img src="image1.jpg"> 
     </a> 
    </div> 
    <div class="span6"> 
     <a> 
      <img src="image2.jpg"> 
     </a> 
    </div> 
</div> 

CSS :

.span6{ 
    height: 160px; 
    overflow: hidden; 
    text-align: center; 
    padding: 0; 
} 


.span6 img{ 
    height: 160px; 
    width: auto; 
    margin: 0 -100%; /*Only works for webkit based browsers*/ 
} 

어떤 아이디어가? 미리 감사드립니다.

.

편집 :

내가 margin: 0 -50%;에 margin: 0 -100%;를 편집하면 속임수를 썼는지 것을 발견

(모두 크롬, 파이어 폭스, IE 등의). 그러나 더 깨끗한 가능성이 있기 때문에 안드레이의 솔루션을 사용하려고합니다.

Answer 1

는이

.span { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}