Image Centering Issue Inside Parent Div Element

Question

Я использовал JavaScript для создания слайд-шоу на главной странице моего сайта. Проблема, с которой я столкнулась, заключается в том, что изображение не будет сосредоточено на странице, несмотря на все мои усилия. Я могу получить его по центру, если я установил дочерний элемент изображения следующим образом:

#slider img { 
    left: 218px;} 

, но это не является центром для разных размеров окна. Я использую довольно большие изображения, но они могут быть впоследствии изменены. Я использовал заполнители для скрипки. Как вы можете это исправить?

Fiddle

Answer 1

U может легко центр изображения с помощью настройки:

#slider img { 
    display: block; 
    margin: 0 auto; 
    width: 100%; // or your own width 
} 

Answer 2

Попробуйте

<div align='center'>Hello world</div> 

Answer 3

Вы также можете сделать margin:auto.

Answer 4

Ваших изображений внутри #slider имеет position: absolute. Это отрицает объем контейнера, и изображение уже не находится относительно внутри контейнера div#slider.

margin: auto и display: blockбез абсолютное позиционирование.

Пример: https://jsfiddle.net/sukritchhabra/smndp65m/