如何在一个 div 元素中居中显示多个图像？
基本上，我需要将 4 张图像居中。其他一切似乎都很好。我查看了类似的问题并进行了尝试，但似乎没有任何效果 - 然而，其中一个问题使图像居中。问题是图像分布在整个页面上，而我只需要图像之间有几个像素的空间。
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Assignment5.html</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<h1>Visit These Famous Places</h1>
<div>
<img src="Images/Beijing-China.jpg" alt="Beijing" title="Beijing, China">
<img src="Images/Grand-Canyon.jpg" alt="Grand Canyon" title="Grand Canyon, Pheonix, USA">
<img src="Images/Sydney-Opera-House.jpg" alt="Sydney Opera Hourse" title="Sydney Opera House, Sydney, Australia">
<img src="Images/Statue-Of-Liberty.jpg" alt="Statue of Liberty" title="Statue of Liberty, New York, USA">
</div>
</body>
</html>
CSS:
h1 {
text-align: center;
text-shadow: grey 2px 2px 10px;
}
div {
align-items: center;
display: flex;
flex-direction: row;
justify-content: space-between;
}
img {
height: 100px;
width: 150px;
border: 3px solid black;
border-radius: 20px;
margin: 0px auto;
display: block;
}
最佳答案
img {
margin: 0 auto;
}
h1 {
text-align: center;
text-shadow: grey 2px 2px 10px;
}
div {
align-items: center;
display: flex;
flex-direction: row;
justify-content: space-between;
}
img {
height: 50px;
width: 50px;
border: 3px solid black;
border-radius: 20px;
margin: 0px auto;
display: block;
margin: 0 auto;
}<!DOCTYPE html>
<html>
<head>
<title>Assignment5.html</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<h1>Visit These Famous Places</h1>
<div>
<img src="http://lorempixel.com/400/200" />
<img src="http://lorempixel.com/400/200" />
<img src="http://lorempixel.com/400/200" />
<img src="http://lorempixel.com/400/200" />
</div>
</body>
</html>关于html - 如何使多张图片居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45786416/