我在尝试让我的网站看起来更好时遇到了一个小问题。 问题是我试图在我的 div 标签内水平对齐图像。我已经搜索过谷歌并在这里阅读了其他帖子，但它们似乎都不适合我。我已经尝试过类似的东西:float、margin、position:absolute，但它们都不想工作，它们最终只是在中心对齐并向下移动，所以我想知道是否有人可以解决这个问题。
提前致谢!
<style>
body {
background-image: url('bakgrund.jpg');
}
#galleri {
width: 200px;
display:block;
margin: auto;
}
.galleri img {
border-radius: 50%;
opacity: .6;
margin: auto;
}
.galleri img:hover {
opacity: 1;
}
</style>
<body>
<div class="galleri" id="galleri" >
<img src="mat1.jpg" width="250" height="250" alt="avocado">
<img src="mat2.JPG" width="250" height="250" alt="tapas" align="3">
<img src="mat3.jpg" width="250" height="250" alt="soft taco">
<img src="mat5.jpg" width="250" height="250" alt="hard taco" >
<img src="rest1.jpg" width="250" height="250" alt="restaurang">
<img src="rest2.jpg" width="250" height="250" alt="restaurang2">
</div>
</body>最佳答案
试试这个改变
<style>
body {
background-image: url('bakgrund.jpg');
}
.galleri {
display: block;
margin: 30px auto;
text-align: center;
}
.galleri img {
border-radius: 50%;
opacity: .6;
margin: auto 30px;
}
.galleri img:hover {
opacity: 1;
}
</style>
<body>
<div class="galleri">
<img src="mat1.jpg" width="250" height="250" alt="avocado">
<img src="mat2.JPG" width="250" height="250" alt="tapas" align="3">
<img src="mat3.jpg" width="250" height="250" alt="soft taco">
</div>
<div class="galleri">
<img src="mat5.jpg" width="250" height="250" alt="hard taco" >
<img src="rest1.jpg" width="250" height="250" alt="restaurang">
<img src="rest2.jpg" width="250" height="250" alt="restaurang2">
</div>
</body>
你应该为每 3 张图片创建一个元素
关于html - 水平 div img 对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37203503/