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

这是你想要实现的目标吗？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

添加以下课程会将所有图片/文字集中到中心

.left-logo{
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }

如果您希望描述位于图像右侧，只需删除

flex-direction: column;

是正确的吗？

Answer 3

听起来好像你正在寻找彼此相邻的图像，集中显示，下面是他们的描述。为实现此目的，您需要为text-align: center的消息创建容器，并将.message-icons显示为inline-block：

.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中的描述

3 个答案: