首页 话题 小组 问答 好文 用户 我的社区 域名交易

[分享]css中如何实现图片垂直居中

发布于 2024-11-11 19:30:34
0
26

CSS中如何实现图片垂直居中呢?

img {
  display: inline-block;
  vertical-align: middle;
  margin-top: -50%;
  /* 图片高度的一半 */
} 

首先,我们先把图片设置为inline-block元素,这样才能够垂直居中。

接着,使用vertical-align属性,将图片与文本垂直居中对齐。

但是,仅仅使用这两个属性还不够,因为图片的高度可能会大于文本行高,因此我们需要再用一个margin-top属性,将图片向上移动它自身高度的一半。

这样,图片就能够完美地垂直居中了。

评论
91云脑
Lv.1普通用户

62845

帖子

12

小组

80

积分

站长交流