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

web开发中，我们经常遇到的一个问题是，当将图片和文字放置在一个div标签的时候，如果不加任何修改，是无法水平居中对齐的，显然这个不是很美观，本将提供一种居中对齐的方法，希望对需要的同学有所帮助，也欢迎大家交流其他更好的方法。

操作方法

  • 01

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

  • 02

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

  • 03

    再次编辑a.html，加入以下css代码： .hlong *{display:inline-block;vertical-align:middle} 保存

  • 04

    再次使用浏览器访问a.html页面，如下：

  • 05

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

赞 (0)

相关推荐

  • 在word2010中如何对图片批量进行居中对齐?

    Word我们经常用来进行图片混排的操作,有时候一篇文档中会有很有图片需要进行对齐操作,如果一张一张的进行,那效率就非常低了.下面给大家介绍如何在word2010中批量进行图片对齐操作,来看看吧! 步骤 ...

  • DreamWeaver中如何设置将将文字居中对齐

    DreamWeaver中如何设置将将文字居中对齐 操作方法 01 打开DreamWeaver软件,在body标签中间点击一下,调出文字输入框 02 然后输入div标签,如下图所示 03 在head标签 ...

  • 如何使Word中文字居中对齐

    Word是非常实用的办公软件,今天给大家分享几种Word中表格内的文字居中对齐的方法. 操作方法 01 方法一:直接选中表格内的文字,点击菜单栏中出现"布局"选项卡. 02 从居中 ...

  • 美图秀秀中如何给图片添加文字边框

    美图秀秀中如何给图片添加文字边框

    有的小伙伴在使用美图秀秀软件时,喜欢给图片添加边框,那么如何添加文字边框呢?小编就来为大家介绍一下吧.具体如下:1. 第一步,双击或者右击打开美图秀秀软件.2. 第二步,来到美图秀秀软件主页面后,点击 ...

  • 在PS Photoshop软件中怎么将图片导入文字字体中

    在PS Photoshop软件中怎么将图片导入文字字体中

    今天给大家介绍一下在PS Photoshop软件中怎么将图片导入文字字体中的具体操作步骤.1. 打开电脑,找到桌面上的PS软件,双击打开.2. 然后选择新建一个空白文档,如图进行设置,最后确定.3. ...

  • WPS演示中如何设置图片和文字的渐变效果

    WPS演示中可以设置图片和文字的渐变效果,目的是使得幻灯片更加炫酷醒目,下面一起来看看如何操作吧! 操作方法 01 打开一个演示文稿,双击形状,右侧会出来填充设置选项. 02 系统默认的是纯色填充,点 ...

  • Word文档中怎样使一段文字居于页面正中间

    有时因特殊需要,需要在页面正中间安排一句话或一段文字,可以使用对齐功能.如图所示. 操作方法 01 建立Word文档. 02 点击"插入"-"文本框"-&quo ...

  • ps中如何让图片或文字水平垂直对齐

    有时,我们想让文字或者图片,在画面中居中对齐或者左对齐或右对齐,现在小编就为大家介绍一下如何让图片或文字水平垂直居中对齐. 操作方法 01 给大家做个例子,首先,我们我们需要新建一个文档  尺寸为 6 ...

  • word中如何让文本框中的文字居中对齐

    word中如何让文本框中的文字居中对齐呢?下面小编来教大家. 操作方法 01 首先,我们打开我们电脑上面的word,然后我们点击插入: 02 之后我们点击文本框,弹出的界面,我们点击简单文本框: 03 ...