Html 垂直对齐内联文本/图像

我的标题中有标题和副标题：

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

---

这适用于like计数，但不适用于名称。名称如何显示在同一垂直对齐中？

您可以创建一个列表，并使其显示在内联块中：

<ul>
   <li>Name</li>
   <li>Like Counts</li>
   <li><img ... /></li>
</ul>

li
{
display:inline-block
}

名字
像计数一样


锂
{
显示：内联块
}

试试这个

创建此样式

div.LeftColumn{width:170px；float:left；背景图像：url（“http://placehold.it/44x44"); }

更改为DIV并指定样式

<p><div class="LeftColumn">By John Smith  100 likes</div></p>

约翰·史密斯100喜欢

如果你想要更多的盒子外观，你需要进一步调整，但这会给你图像中的文本

约翰·史密斯
100喜欢

使用flexbox的现代方式

标题p{
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
边框：1px实心；
}
收割台p跨度{
显示器：flex；
对齐项目：居中；
}

文章标题

约翰·史密斯
204喜欢

？认为他/她可能想要维护空间，使flex box成为一个很好的解决方案？不能使用flexbox imafraid@notulysses谢谢，但是喜欢的人需要正确地排列，因为他们实际上不起作用。将字体大小更改为大于图像大小

<p><div class="LeftColumn">By John Smith  100 likes</div></p>