如何將內嵌塊圖標與標籤對齊？

Question

我想水平對齊標記的圖標，但一直有麻煩就像在下面剪下。出於某種原因，圖標拒絕對齊。我確信圖像文件上沒有空白，導致這種情況，所以我不知道它爲什麼會發生。另外，我現在所做的是導致後續的p-tag顯示內聯塊。任何建議表示讚賞！

<div style='float:left'><div><img src='https://www.wgeil.de/wp-content/uploads/2017/02/balcony.png' width='50px'></div><span>The First Label</span></div></div> 
 

 
<div style='float:left'><div><img src='https://www.wgeil.de/wp-content/uploads/2017/02/pet-friendly.png' width='50px'></div><span>The Second Label</span></div></div> 
 

 
<p>Some text that needs to start on a new line..</p>

Answer 1

簡單的使用CSS inline-block。根據需要使用任何其他css類來微調圖標之間的邊距。

<div style='display: inline-block;'><div><img src='https://www.wgeil.de/wp-content/uploads/2017/02/balcony.png' width='50px'></div><span>The First Label</span></div></div> 
 

 
<div style='display: inline-block;'><div><img src='https://www.wgeil.de/wp-content/uploads/2017/02/pet-friendly.png' width='50px'></div><span>The Second Label</span></div></div> 
 

 
<p>Some text that needs to start on a new line..</p>