如何将内联块图标与标签对齐？答案

【问题标题】：How to align inline-block icons with labels?如何将内联块图标与标签对齐？
【发布时间】：2017-07-14 14:19:40
【问题描述】：

我正在尝试水平对齐带标签的图标，但遇到了如下截图所示的问题。出于某种原因，图标拒绝对齐。我确保图像文件上没有导致这种情况的空白，所以我不确定它为什么会发生。此外，我现在拥有的是导致后续 p-tag 显示 inline-block。任何建议表示赞赏！

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

【问题讨论】：

标签： html image icons alignment

【解决方案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>

【讨论】：