css 图片一行居中显示文字

在 CSS 中实现图片和文字的一行居中显示是很常见的需求。对于初学者来说，可能不太容易实现。下面我们来看看一种简单实用的方法。

首先，我们需要一个 div 容器，里面包含一张图片和一段文字。

  <div class="container">
    <img src="image.png">
    <p>这是一段文字</p>
  </div>

为了实现图片和文字在同一行居中显示，我们可以将它们都设置为 display: inline-block;，然后通过设置容器的 text-align: center; 来实现居中显示。

  .container img,.container p {
    display: inline-block;
    vertical-align: middle;
  }
  
  .container {
    text-align: center;
  }

这里我们还设置了图片和文字的 vertical-align: middle;，让它们垂直居中对齐。

如果我们希望图片和文字之间加入一定的间距，可以通过设置容器的 line-height 属性来实现。

  .container {
    text-align: center;
    line-height: 60px; /* 假设间距为 60px */
  }

通过以上代码的设置，我们就可以实现图片和文字在同一行居中显示，并且可以控制它们的间距。