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

 时间:2024-10-13 16:46:10

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鼠标悬停变色
  • 热门搜索
    过犹不及是什么意思 肠癌有什么症状 童年是什么 smile是什么意思 疖子是什么 绿茶是什么 国民老公是什么意思 植物羊绒是什么面料 产能过剩是什么意思 锐利的反义词是什么