HTML/CSS - 居中内联多个 div

Question

我试图完成一些相当基本的事情，但到目前为止我没能成功。我有一个图像和一个标题，它们应该显示在父选择器 (div) 的中心。不幸的是，当我将 Logo 和文本居中时，我不知道如何正确对齐它们。

HTML:

  <div class="content">
    <div class="header">
      <img src="path/to/image">
      <span>Hey this is my title</span>
    </div>
  </div>

CSS:

.header{
   text-align: center;
   width: 100%;
   height: 40px;
}
.header img{
   height: 40px;
   width: auto;
   display: inline-block;
}
.header span{
   display: inline-block;
}

如您所见， Logo 具有静态宽度/高度，而文本可以具有可变高度。上面的代码使样式如下例所示:

谁能告诉我怎么做？我基本上希望几个 div 彼此相邻，但都居中对齐。

Answer 1

您是否正在寻找 vertical-align: middle 以垂直居中？

.header {
  text-align: center;
  width: 100%;
  height: 40px;
}
.header img {
  height: 40px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
}
.header span {
  display: inline-block;
  vertical-align: middle;
  background: #eef;
}

<div class="content">
  <div class="header">
    <img src="//placehold.it/40?text=Logo" />
    <span>Hey this is my title</span>
  </div>
</div>

注意:我添加了背景以更好地显示边界。

更好的解释: