HTML中如何使图片和文字居中对齐

 时间:2026-04-24 02:39:59

1、首先,我们先看看不加任何修改的时候的效果,新建a.html文件,并准备一张小标,如下:

HTML中如何使图片和文字居中对齐

HTML中如何使图片和文字居中对齐

2、使用浏览器打开a.html,可以看到默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐,如下:

HTML中如何使图片和文字居中对齐

3、再次编辑a.html,加入以下css代码:

.hlong *{display:inline-block;vertical-align:middle}

保存

HTML中如何使图片和文字居中对齐

4、再次使用浏览器访问a.html页面,如下:

HTML中如何使图片和文字居中对齐

5、对比一下两种结果,很显然后一个要比前一个好看多了,赶紧动手试一试吧:

HTML中如何使图片和文字居中对齐

HTML中如何使图片和文字居中对齐

  • HTML网页怎么设置圆角边框
  • html图片位置调节
  • 如何在HTML中插入图片
  • html怎样设置超链接点击过后整个层都变颜色?
  • html鼠标悬停变色
  • 热门搜索
    干锅菜花的家常做法 宝宝舌苔厚白是怎么回事 人员类别怎么填 星期二用英语怎么说 这个字怎么读 为什么要结婚 不知道为什么 口罩正反面怎么区分 中秋节为什么吃月饼 蛋糕的做法大全烤箱