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

2023年1月18日 127次阅读

出于某些奇怪的原因,使用margin来居中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上谈论的这种中心化的其他实例都没有任何帮助.我已经尝试了这个有没有在类上设置的显示类型,但无济于事.任何洞察这一点将不胜感激.

最佳答案 那是因为你的图像是150px ..你的div是文档的80％

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

点赞