父Div元素内的图像居中问题

Question

我使用JavaScript在网站首页上创建幻灯片。 我遇到的问题是，即使我尽了最大努力，图像也不会居中。 如果像这样设置image子元素，则可以使它居中：

#slider img {
    left: 218px;}

但这并不适合于不同的窗口大小。 我正在使用相当大的图像，但是以后可以随时调整它们的大小。 我用占位符作为小提琴。 您该如何解决？

小提琴

Answer 1

您可以通过设置轻松地使图像居中：

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

Answer 2

您在#slider中的图片的position: absolute 。 这会否定容器的范围，并且图像不再相对位于容器div#slider内部。

使用margin: auto ， display: block 无绝对定位的display: block 。

示例： https ： //jsfiddle.net/sukritchhabra/smndp65m/

Answer 3

尝试

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

Answer 4

您也可以执行margin:auto 。