html - 垂直对齐内联文本/图像

Question

Fiddle

我的页眉中有标题和副标题:

<header>
    <h1>Article Title</h1>
    <p>By John Smith<span class="right">100 likes<img src="http://placehold.it/44x44"/></span></p>
</header>

副标题需要在左边有一个名字，在右边有一个喜欢的数量 - 带有图像。

我希望文本位于图像的垂直中心，所以我使用了:

img{
      vertical-align: middle;
}

这适用于点赞数，但不适用于名称。名称如何出现在相同的垂直对齐中？

Answer 1

使用 flexbox 的现代方式。

header p {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid;
}

header p span {
  display: flex;
  align-items: center;
}

<header>
  <h1>Article Title</h1>
  <p>
    <span>By John Smith</span>
    <span>204 likes<img src="http://placehold.it/44x44"/></span>
  </p>
</header>

原始答案

如果可以加一个<span>围绕名称，继续阅读。

span {
    display: table-cell;
    vertical-align: middle;
    white-space: nowrap;
}
img {
    vertical-align: middle;
}
.right {
    width: 100%;
    text-align: right;
}

<header>
    <h1>Article Title</h1>
    <p><span>By John Smith</span><span class="right">204 likes<img src="http://placehold.it/44x44"/></span></p>
</header>

fiddle 演示: http://jsfiddle.net/L4n50f49/