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

Image Centering Issue Inside Parent Div Element

本文关键字：问题 图像 元素 Div      更新时间：2023-09-26

我用JavaScript在我的网站主页上创建了一个幻灯片。我遇到的问题是，尽管我尽了最大的努力，图像将不会在页面的中心。我可以让它居中如果我像这样设置image子元素

#slider img {
    left: 218px;}

，但它不会为不同的窗口大小居中。我使用的是相当大的图像，但它们总是可以在以后调整大小。我用占位符代替小提琴。如何解决这个问题?

小提琴

您可以轻松地设置图像居中:

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

您的图像在#slider有一个position: absolute。这否定了容器的作用域，并且图像不再相对定位在容器div#slider内。

使用margin: auto和display: block ，不使用绝对定位。

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

你也可以做margin:auto

Try 

<div align='center'>Hello world</div>
相关文章：