Центрирование изображений в 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 */ 
}