HTML / CSS - 中心多个div内联

Question

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

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

正如您所看到的，徽标具有静态宽度/高度，而文本可以具有可变高度。 上面的代码使样式像下面的示例：

谁能告诉我怎么做？我基本上想要彼此相邻的几个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>

注意：我添加了背景以更好地查看边框。

更好的解释：

Answer 2

使用flexbox。我不知道我是否正确地知道您希望您的项目在标题内水平和垂直居中。如果不只是删除justify-content部分。

.header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

有关flexbox的更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/