css图片和两行文字的居中对齐

CSS图片和两行文字的居中对齐是网页设计中非常常见的排版要求。下面我们来学习如何用CSS来实现这个效果。

  <div class="container">
    <img src="example.png">
    <p>这是一行文字</p>
    <p>这是另外一行文字</p>
  </div>

  <style>
    .container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    img {
      display: block;
      margin: auto;
    }
  </style>

我们首先将图片和文字都放在一个容器内，然后使用CSS的flex布局将容器内的元素垂直居中。

对于图片，我们设置其为块级元素，并将margin设置为‘auto’，即可实现水平居中。

这样，我们就成功实现了CSS图片和两行文字的居中对齐，为网页排版提供了更多的选择。