내 이미지를 CSS로 가운데 맞추기

Question

키 프레임과 애니메이션을 사용하여 순수한 CSS를 사용하여 이미지 슬라이더를 만들었지 만 왼쪽과 오른쪽에 대해 여백 : 자동을 사용하여 이미지의 중심을 맞추려고하는데 중심을 맞추지 않는 것 같습니다. , 그것을 실제 픽셀 값을주고 주위로 옮길 수 있습니까? Heres는 내 CSS 코드 :

.slide { 
    position:absolute; 
    margin-left: auto; 
    margin-right: auto; 
    width: em; 
    padding: 3px; 
    border-top: 2px dotted black; 
    border-bottom: 2px dotted black; 
} 

Heres는 HTML 코드 :

 <div id="slider"> 
      <img src="images/horse4.jpg" class="slide"> 
      <img src="images/horse3.jpg" class="slide"> 
      <img src="images/horse2.jpg" class="slide">    
      <img src="images/horse1.jpg" class="slide"> 
    </div> 

Answer 1

당신이 아마 원하는 것은 :

#slider { 
    text-align: center; 
} 
.slide { 
    position: absolute; 
    /* rest of your visual styling here */ 
}