Question

由于一些奇怪的原因，使用保证金居中div：0 auto无效。我的代码：

HTML：

<!DOCTYPE html>

<html>

<head>
<meta charset="utf-8">
<title>Picture Gallery</title>

<link rel="stylesheet" href="css/week7.css">

</head>

<body>

<h1>The Mighty Avengers</h1>



<div class="slide1">
    <img src="images/hawkeye.jpg" alt="Hawkeye" />
    <img src="images/capmar.jpg" alt="Captain Marvel" />
    <img src="images/beast.gif" alt="Beast" />
    <img src="images/thor.jpg" alt="Thor" />
</div>

 <div class="slide2">
    <img src="images/cap.jpg" alt="Captain America" />
    <img src="images/ant.jpg" alt="Ant Man" />
    <img src="images/vision.jpg" alt="The Vision" />
    <img src="images/scar.jpg" alt="Scarlet Witch" />
</div>



</body>

</html>

和CSS：

html {
background-color: gray;
}

h1 {
text-align: center;
}

img {

height: 250px;
margin-left: -20px;
width: 250px;
}

.slide1, .slide2 {
display: block;
margin: 0 auto;
width: 85%;
}

在Stack上谈到的这种中心化的其他实例都没有任何帮助。我已经尝试过这种方法，无论是否在课程上设置了显示类型，都无济于事。任何洞察这一点将不胜感激。

Answer 1

那是因为你的图像是150px ..你的div是文件的80％

你可以修复它做text-align：center; on .slide1，.slide2。

Answer 2

首先margin: 0 auto;正在处理您的情况，但问题是另一个 - 图像宽度不足以完全填充容器，因此如果您想将图像居中在这里是一个代码：

img:first-child {
    margin-left: 0;
}

.slide1, .slide2 {
    display: block;
    margin: 0 auto;
    width: 85%;
    text-align: center;
}

Answer 3

我想这就是你要找的东西：

<强> Working : Demo

HTML ：无变化

<强> CSS

html {
background-color: gray;
}

h1 {
text-align: center;
}

img {

height: 250px;
margin-left: -2px; /* So that it resides side by side*/
width: 250px;
}

.slide1, .slide2 {
display: block;
margin: 0 auto;
width: 500px; /* As you are having 250px for each image */        
}

Answer 4

你想要实现的目标是什么？您的幻灯片div居中。我给它们涂了一个黄色边框，以便你可以看到。

.slide1, .slide2 {
  display: block;
  margin: 0 auto;
  width: 85%;
  border:1px solid yellow;
}

我还更新了你的img css以使其更具响应性，以便图像不会换行到第二行。

img {
  height: auto;
  width: 25%;
  max-width:250px;
}

https://jsfiddle.net/Lmmb03ck/4/

希望有所帮助。

保证金：0自动定位不在div上工作

4 个答案: