css - 使用 CSS 垂直对齐时行高的额外空间

Question

我经常需要将图像与其旁边的文本 block 垂直对齐。

像这样:

问题在于，由于文本的行高，文本上方出现了额外的空格:

我不能只删除行高，因为这是一个需要超大行高的多行文本 block 。

我想出的唯一解决方案是将 margin-top: -5px 应用到文本的顶部，使其与图像视觉对齐。

然而，这似乎是一个脆弱的解决方案，因为对页面行高的任何更改都会影响对齐。

有没有更好的解决方案？

Answer 1

根据您的意愿设置文本样式..

然后包装一个 div围绕该文本区域，定义您希望该区域在页面上的位置。

(IMO 更稳定/语义/和跨浏览器友好然后样式 <p> 或 <span> 标签单独用于定位。)

<article class="cooltext">

<span class="nacholibre">one time at band camp...</span>

</article>

CSS

.cooltext { 
   margin-top:-4px; // where you want this in the page
   width: 200px; // however in relation to layout
   height: 150px; // however in relation to layout
}


.nacholibre { 
   line-height: 12px; // text formatting
   display: inline-block;
}