html文本图片居中 css样式,让图片水平垂直居中的三种CSS写法

第一种写法：使用背景图片的方法让图片水平垂直居中

Html代码内容：

Css代码内容：.div_img{

width: 720px;

height: 160px;

border: 1px dashed #666;

background: url(pic_name.jpg) no-repeat center center;

}

实现效果如下：

第二种写法：通过设置图片父级元素P的line-height属性来让图片水平垂直居中

Html代码内容：

Css代码内容：*{margin: 0px;padding: 0px}

.div_img{

width: 720px;

height: 160px;

border: 1px dashed #666;

text-align: center;

}

.div_img p{

width:800px;

height:300px;

line-height:300px;  /* 行高等于高度 */

background-color:#ccc;

}

.div_img p img{

*margin-top:expression((800 - this.height )/2);  /* CSS表达式用来兼容IE6/IE7 */

vertical-align:middle;

border:1px solid #ccc;

}

实现效果如下：

第三种写法：使用CSS样式的display:table-cell;属性让图片水平垂直居中

Html代码内容：

Css代码内容：.div_img{

width: 720px;

height: 160px;

border: 1px dashed #ccc;

display: table-cell; //主要是这个属性

vertical-align: middle;

text-align: center;

}

实现效果如下：

本文地址：https://www.up7.com.cn/news/248.html