在 CSS 中居中图片和描述

Question

如何让两张图片依次居中？每张图片都有一个描述，位于图片的右侧。

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

在我看来，您似乎希望将图像并排显示，集中显示，并在下方显示它们的描述。为此，除了使 .message-icons 显示为 inline-block 之外，您还希望为具有 text-align: center 的消息创建一个容器：

.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>

希望对您有所帮助！ :)

在 CSS 中居中图片和描述

Center pictures and description in CSS

html

css

css-float