Question

在本文中，我有三张图像希望放在同一行中。第一张图片应位于左侧，第二张图片应居中，第三张图片应位于右侧。

自从在CSS中执行float：left或float：right以来，我对第一个图像和第三个图像都没有问题。我解决了这个问题，但是我无法使第二个图像居中。

<section>
     <article>
         <img class="first" src="img/1.jpg" alt="img"/>
         <img class="second" src="img/2.jpg" alt="img"/>
         <img class="third" src="img/3.jpg" alt="img"/>
     </article>
 </section>

感谢您的帮助。

Answer 1

article {
  display:flex;
  justify-content:space-between;
}

<section>
     <article>
         <img class="first" src="https://picsum.photos/300/200" alt="img"/>
         <img class="second" src="https://picsum.photos/300/200" alt="img"/>
         <img class="third" src="https://picsum.photos/300/200" alt="img"/>
     </article>
 </section>

Answer 2

我建议您使用Flexbox。

<div class='flexWrapper'>
    <img class="first" src="img/1.jpg" alt="img"/>
    <img class="second" src="img/2.jpg" alt="img"/>
    <img class="third" src="img/3.jpg" alt="img"/>
</div>

.flexWrapper {
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center; /* to align them vertically */
}

Answer 3

您可以使用flexbox。

article {
  display:flex;
  justify-content: space-between;
}

<section>
     <article>        
         <img class="first" src="https://via.placeholder.com/150" alt="img"/>
         <img class="second" src="https://via.placeholder.com/150" alt="img"/>
         <img class="third" src="https://via.placeholder.com/150" alt="img"/>
     </article>
 </section>

Answer 4

你好！

<section>
          <article>
          <img class="first" src="img/1.jpg" alt="img"/>
          <img class="second center" src="img/2.jpg" alt="img"/>
          <img class="third" src="img/3.jpg" alt="img"/>
         </article>
       </section>

使用此CSS类

    .center {
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 50%;
    }

现在尝试执行它。

Answer 5

最后，我通过在文章的CSS中指示text-align：center解决了它。之所以起作用，是因为图像（如文本）是线元素。谢谢

容器内的中心图像

5 个答案: