CSS中的中心图片和描述

Question

我怎样才能对2张照片进行居中，一个接一个？每一幅画都有一幅画的右边。

CSS

.message-icon_description {
            text-align: left;
            font-size: 15px;
            color: #606060;
            opacity: 1;
        }
    .left-logo img {
            float: left;
            margin: 15px 15px 15px 0px;
        }

HTML

<div class="message-icons">
    <div class="left-logo">
        <img src="./images/blue.png" alt="blue-message-logo">
            <div class="message-icon_description">
                <p>Description1</p>
            </div>
    </div>
</div>

<div class="message-icons">
    <div class="left-logo">
        <img src="./images/yellow.png" alt="yellow-message-logo">
        <div class="message-icon_description">
            <p>Description2</p>
        </div>
     </div>
</div>

这是我已经尝试过的，但效果不太好，它向我展示了我想要的picture1_description1 picture2_description2，但是它们不是中心的，它们从左边开始。有什么建议吗？

Answer 1

这就是你想要达到的目标吗？

​

.message-icon_description {
  text-align: left;
  font-size: 15px;
  color: #606060;
  opacity: 1;
}

.left-logo {
  display:flex;
}

.left-logo img {
  //float: left;
  margin: 15px 15px 15px 0px;
}

.container {
  display:flex;
}

<div class="container">

  <div class="message-icons">
    <div class="left-logo">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTwy9x2ChZ-mbHy-lx9ZPRe5ZhIk3SLHCMBVzMaiTlg_3bSIOAn6fC3Wjk" alt="blue-message-logo">
      <div class="message-icon_description">
        <p>Description1</p>
      </div>
    </div>
  </div>

  <div class="message-icons">
    <div class="left-logo">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTwy9x2ChZ-mbHy-lx9ZPRe5ZhIk3SLHCMBVzMaiTlg_3bSIOAn6fC3Wjk" alt="yellow-message-logo">
      <div class="message-icon_description">
        <p>Description2</p>
      </div>
    </div>
  </div>

</div>

​

Answer 2

对我来说，这听起来就像你想把图像显示在彼此的旁边，集中在一起，下面是它们的描述。为了实现这一点，除了将显示为inline-block之外，您还希望为具有text-align: center的消息创建一个.message-icons容器

​

.message-container {
  text-align: center;
}

.message-icons {
  display: inline-block;
}

<div class="message-container">

  <div class="message-icons">
    <div class="left-logo">
      <img src="http://via.placeholder.com/100" alt="blue-message-logo">
      <div class="message-icon_description">
        <p>Description1</p>
      </div>
    </div>
  </div>

  <div class="message-icons">
    <div class="left-logo">
      <img src="http://via.placeholder.com/100" alt="yellow-message-logo">
      <div class="message-icon_description">
        <p>Description2</p>
      </div>
    </div>
  </div>

</div>

​

希望这会有帮助！)