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

2023年5月23日 158次阅读

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

像这样：

它的问题是,由于文本的行高,文本上方会出现一个额外的空间：

我不能只删除行高,因为这是一个需要奢华大线高度的多行文本块.

我提出的唯一解决方案是在文本顶部应用margin-top：-5px,使其与图像光学对齐.

然而,这似乎是一个脆弱的解决方案,因为对页面行高的任何改变都会导致对齐.

有更灵活的解决方案吗？

最佳答案 像你一样设计文本样式..

只需在文本区域周围包裹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;
}
点赞