父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 。