如何在页面上居中放置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>是一个块元素而<img>是一个内联块元素，如果你想要水平居中图像，那么它就足以将text-align: center;设置为div容器：

＆＃13;

＆＃13;

.sketches {
   text-align: center;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

设置放置图片的容器的相应width，然后将margin-left和margin-right设置为自动

.sketches{
  width: 300px;
  margin: 20px auto;
}

Answer 3

以下是解决方案：

＆＃13;

＆＃13;

.outer {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}
.middle {
  display: table-cell;
  vertical-align: middle;
}
.sketches {
  align-content: center;
  margin-left: auto;
  margin-right: auto;
}
img {
  border-radius: 50%;
  border: 1px solid #000000;
}

＆＃13;

<div class="outer">
  <div class="middle">
    <div class="sketches" align=center>
      <img src="image1.jpg">
      <img src="image2.jpg">
      <img src="image3.jpg">
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

使用的技术从here垂直居中。

Answer 4

<强> CSS

a）.sketches选择器

<小时/> 1）插入display: flex;声明
2）取代CSS属性：align-content添加justify-content

.sketches {
 display         : flex;
 justify-content : center;
  
 /* can be removed */
 min-width : 350px;
}

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

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