在css中要实现内容垂直居中我们的css有个vertical-align: middle;
属于,但是一般情况下是没有效果的,下面我们来看解决办法。div水平居中很容易,设置css样式 text-align: center;
 就可以了。垂直居中也有个属性 vertical-align: middle; 这个属性普通设置是没有效果的。

第一种方法:通过一个空白图片可以达到垂直居中的效果

代码如下:
图片居中
/*定义垂直居中*/

#test * {

margin: 0px;

padding: 0px;

vertical-align: middle;

}

/*定义div大小,以及水平居中*/

#test {

background: #fff000;

width: 500px;

height: 500px;

text-align: center;

}

/*辅助图片高度填满div,宽度为0,所以看不到这个图片*/

#img {

width: 0px;

height: 100%;

}

个人觉得vertical-align: middle 是相对于左边的高度垂直居中的,我给左边一个填满div的图片,就可以实现垂直居中了。

第二种方法:往div里面加表格。

代码如下:

#a {

background: #fff000;

width: 500px;

height: 500px;

overflow: hidden;

text-align: center;

}

在表格里就很容易设置居中了。

经测试,这两种做法都没有浏览器不兼容的问题。推荐用第一种方法。

另外,说一下overflow: hidden; 这个属性,当图片大小超出div的大小时,会影藏超出的部分。不设置的话,图片会全部显示,覆盖在div上。

技术
下载桌面版
GitHub
百度网盘(提取码:draw)
Gitee
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:[email protected]
QQ群:766591547
关注微信