前端排版的时候,常常会碰到图片在一个区域在正中间,水平居中很容易做到,外层样式用{text-align:center}就可以水平居中;如果知道图片的高度,垂直居中可以在外层样式加padding样式,如果图片高度不知道的情况,又怎么做呢? 工具/原料 做网页的工具都行 ,比如:Dreamweaver,Aptana Studio,EditPlus等,记事本也可以。 方法/步骤 在这里我用的是EditPlus,双击打开 点击左上角,文件》新建》html网页 在图片标签<img src="xxx" />之前加一个行内元素,比如加个<span></span>就行了。 给外层div加上text-align:center; 给span的样式display:inline-block;height:100%;vertical-align: middle; 给图片加上vertical-align: middle; 显示结果 6 文字居中 设置行高line-height等于外层的高度就行了。 END 注意事项 图片的大小不能大于外层div的大小,所以最好给图片加上max-width,max-height样式。