html - 如何将 3 个水平排列的图像在页面上居中？

Question

我有一个非常简单的 HTML/CSS 网页。

我在页面上水平排列了三个图像，如下所示:

我想将它们放在页面中央，如下所示:

解决办法是什么？

这是我当前使用的(不起作用)代码:

.sketches {
  align-content: center;
}
img {
  border-radius: 50%;
  border: 1px solid #000000;
}

<div class="sketches">
  <img src="image1.jpg">
  <img src="image2.jpg">
  <img src="image3.jpg">
</div>

Answer 1

自 <div>默认情况下是 block 元素并且 <img>是一个内联 block 元素，如果你想让图像水平居中，设置 text-align: center; 就足够了到 div 容器:

.sketches {
   text-align: center;
}

img {
   border-radius: 50%;
   border: 1px solid #000000;
}

<div class="sketches">
        <img src="image1.jpg">
        <img src="image2.jpg">
        <img src="image3.jpg">
</div>