如何在图像旁垂直对齐文本？

19 浏览
0 Comments

如何在图像旁垂直对齐文本？

为什么无法使用vertical-align: middle？但是，vertical-align: top是有效的。

span{
  vertical-align: middle;
}

  small img
  Doesn't work.

admin 更改状态以发布 2023年5月21日
0

2 答案

0 Comments

这里有一些垂直对齐的简单技巧：

单行垂直对齐：居中对齐

这个很简单：将文本元素的行高设置为与容器相等

  
  Doesn't work.

多行垂直对齐：底部对齐

将内部 div 相对于其容器进行绝对定位

  This is positioned on the bottom

多行垂直对齐：居中对齐

  This is positioned in the middle

如果您必须支持旧版本的 IE <= 7

为了在所有浏览器中正确地使用这个技巧，您需要稍微修改 CSS。幸运的是，IE 存在一个 bug，有利于我们。在容器上设置 top:50%，在内部 div 上设置 top:-50%，您可以实现同样的效果。我们可以使用 IE 不支持的高级 CSS 选择器来将这两个属性结合起来。


    
Works in everything!

可变容器高度的垂直对齐：居中对齐

这个解决方案需要比其他方案更现代的浏览器，因为它使用了 transform: translateY 属性。（http://caniuse.com/#feat=transforms2d）

将以下 3 行 CSS 应用到一个元素上，将在其父元素中垂直居中：

position: relative;
top: 50%;
transform: translateY(-50%);

0
0 Comments

其实在这种情况下非常简单：将垂直对齐应用到图像上。由于所有内容都在一行，你真正需要对齐的是图片，而不是文本。


  A grey image showing text 60 x 60
  Works.

已在FF3中测试。

现在你可以使用flexbox进行这种类型的布局。

.box {
   display: flex;
   align-items:center;
}


    
    Works.

0