代码之家 › 专栏 › 技术社区 › Jeremy Kauffman

如何将图像垂直居中于一条线上?

vertical-alignment alignment css html

Jeremy Kauffman · 技术社区 · 14 年前

当图像小于行高时,在一行上居中放置图标的最佳方法是什么?

例如(样式内联以便于阅读):

<div style="line-height: 20px">
  <img style="width: 12px; height: 12px;"/>
  Blah blah blah
</div>

Here's a jsFiddle example . 这个例子也说明了原因 vertical-align: middle 不起作用。

我希望img以div的文本为中心,也就是说,即使文本被包装成多行,图像也会以单行为中心。理想情况下,解决方案不会涉及设置边缘/填充的形象,将工作,即使我不知道线的高度。

我读过的东西:

3 回复 | 直到 7 年前

Pär Wieslander 10 年前

问题的原因是图像相对于图像垂直居中 x-height 周围的文字。这可以在放大的屏幕截图上非常清楚地看到 baseline 和 mean line 包括以下内容:

illustration of a vertically aligned image compared to the surrounding text's baseline and mean line

无论使用哪种字体大小或行高,图像的对齐方式都是相似的。所以,从排版的角度来说, 图像实际上是垂直对齐的 . 但是,如果您想调整对齐方式,使图像的中心更接近平均线,只需使用 margin-bottom

img.icon {
    margin-bottom: 0.25em;
}

0.25em的值是任意选择的,这是基于我试用时看起来不错的值。根据口味自由调节。

Nik Chankov 14 年前

<div style="line-height: 20px; background: url(path/image.gif) 5px 5px; no-repeat; padding-left: 40px;">
  Blah blah blah
</div>

这会将图像定位在左上角。至少我会这么做。

当做

vtambourine 14 年前

试着让父母 display: table display: table-cell . 之后 vertical-align: middle 应该以“餐桌方式”工作。

推荐文章

William Entriken · 排列不同尺寸的徽章

7 年前

user438461 · 在我的WPF选项卡项中设置VerticalContentAlignment会更改选项卡中的文本和选项卡中包含的控件

7 年前

SmallSani · 当更改内容时,如何在页面上垂直居中放置div?

7 年前

Benji · -webkit背景剪辑:文本和垂直居中文本

7 年前

Travis Martin · flexbox布局中的垂直文本

7 年前

Mike Waldrup · 弹性物品被撞倒,正好是前一件物品的一半高度

7 年前

karlo1zg · 垂直对齐输入元素中间的浮动标签

7 年前

Ahmed Elashker · Xamarin在平台垂直选项上形成XAML

7 年前

coreysimons · 动态布局中的图像对齐

7 年前

Théo Clayette · 设置垂直Android工具栏

7 年前