垂直對齊內聯文本/圖像

Question

小提琴

我的標題中有標題和副標題：

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

小提琴演示： http : //jsfiddle.net/L4n50f49/

Answer 2

您可以創建一個列表並使其顯示在 inline 塊中：

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

li
{
display:inline-block
}

Answer 3

嘗試這個。

創建此樣式<style> div.LeftColumn { width: 170px; float: left; background-image:url("http://placehold.it/44x44"); } </style> <style> div.LeftColumn { width: 170px; float: left; background-image:url("http://placehold.it/44x44"); } </style>

更改為 DIV 並指定樣式。

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

如果您想要更多的框外觀，則需要進一步調整，但這會為您提供圖像中的文本。

Answer 4

 <table> <tr> <td> John Smith </td> <td> 100 Likes </td> <td><img src="http://placehold.it/44x44"/></td> </tr> </table>