频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
CSS利用table-cell实现垂直居中
2017-12-20 10:43:20         来源:ken_ding的博客  
收藏   我要投稿

1.利用table-cell实现垂直居中

这里写图片描述

p{
  width: 500px;
  height: 500px;
  background: #ccc;
}
.box1{
  text-align:center;
  display: table-cell;
  vertical-align: middle;
  /* font-size: 118px; */
}
img{
  vertical-align: middle;
}

利用父元素为display:table-cell类型实现垂直居中,table在ie8+的浏览器中自带的垂直居中的属性。

注意:img{vertical-align: middle;}只是为了消除display:inline-block类型的基线对齐问题。

####2.多行文本的垂直居中方法 有时可能我们会遇到需要多行文本垂直居中的一些情况,但是做起来有时有些麻烦,需要我们换个思路去实现。 ![这里写图片描述](https://img.blog.csdn.net/20171220081559379?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQva2VuX2Rpbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据

p{
  width: 500px;
  height: 500px;
  background: #ccc;
}
.box3{
  display: table-cell;
  vertical-align: middle;
}
span{
  display: inline-block;
  vertical-align: middle;
}

将内部的文本用span标签(其他标签也可以)包裹起来,把span标签设为inline-block,然后当图片的垂直居中处理(ie8+)。

点击复制链接 与好友分享!回本站首页
上一篇:前端抛掷方法代码实现教程
下一篇:两列布局:左侧宽度固定,右侧宽度自适应的两种方法
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站