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

材料/工具

html/css 代码编辑器 浏览器

.top ul li 下面添加：text-align: center;line-heigh

方法

首先 新建a.html文件，并准备一张小标，如下：

按照如下修改就可以对齐了

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

需要准备的材料分别有：电脑、浏览器、html编辑器。1、首先，打开html编辑器，新建html文件

再次编辑a.html，加入以下css代码：

在表单的标头中加入 align="center" 居中代码

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

在css中，背景图片是可以选择显示的位置的，用像素控制，背景居中的话直接用这个代码.beijing

保存

再次使用浏览器访问a.html页面，效果如图。是不是很简单呢？

　　img是内联元素，p标签是块级元素，所以p标签内的文字换行很正常。strong标签是内联元素，所

扩展阅读，以下内容您可能还感兴趣。

html如何使文字和图片的中部对齐?

无标题文档

    我是和图片e79fa5e98193e4b893e5b19e31333337383833居中对齐滴。