正文

css 图片垂直居中总结

IP云
IP云V管理员/1 阅读
07/27
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

1.利用vertical-align:middle； 父级元素设置成display:table-cell; 同级元素设置一个span标签 设置display:inline-block；图片样式设置vertical-align:middle;

添加的span标签要给高度100%; display:inline-block;

HTML

<div>
<span></span>
<img src="data:images/list3_1.jpg">
</div>

css

<style type="text/css">
div {
width: 400px;
height: 300px;
display: table-cell;
/*水平居中*/
text-align: center;
}
div span{
display: inline-block;
height: 100%;
vertical-align: middle;
}
div img {
vertical-align:middle;
}</style>

实例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<style type="text/css">
div {
width: 400px;
height: 300px;
display: table-cell;
/*水平居中*/
text-align: center;
}
div span{
display: inline-block;
height: 100%;
vertical-align: middle;
}
div img {
vertical-align:middle;
}</style><div>
<span></span>
<img src="data:images/list3_1.jpg">
</div></body>
</html>

2.上面的结构 会多个多余的标签

HTML

<div>
<a href="">
<img src="">
</a>
</div>

CSS

div {
width:221px;
height:70px
}
div a{
display:inline-block;
width:221px;
height:70px;
line-height:70px; /*垂直居中关键 行高 高度 inline-block 还有图片vertical-align:middle*/
text-align:center; /*水平居中*/}
div a img{
vertical-align"middle;
}

兼容 IE7+以上可以