Image Centering Issue Inside Parent Div Element

Question

I used JavaScript to create a slideshow on the homepage of my site. The problem I'm having is that the image will not center to the page, despite my best efforts. I can get it centered if I set the image child element like so:

#slider img {
    left: 218px;}

but that doesn't center for different window sizes. I'm using fairly large images, but they can always be resized later. I used placeholders for the fiddle. How can you fix this?

Fiddle

Answer 1

U can easily center image by set up:

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

Answer 2

Your images inside #slider have a position: absolute . This negates the scope of the container and the image is no longer relatively positioned inside the container div#slider .

Use margin: auto and display: block without absolute positioning.

Example: https://jsfiddle.net/sukritchhabra/smndp65m/

Answer 3

尝试

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

Answer 4

您也可以执行margin:auto 。