45fan.com - 路饭网

搜索: 您的位置主页 > 电脑频道 > 电脑教程 > 阅读资讯:CSS居中实例之大小不固定的图片居中方法内容介绍

CSS居中实例之大小不固定的图片居中方法内容介绍

2018-01-04 15:26:02 来源:www.45fan.com 【

CSS居中实例之大小不固定的图片居中方法内容介绍

本文介绍了CSS居中实例之大小不固定的图片居中方法,分享给大家,具体如下:

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

CSS居中实例之大小不固定的图片居中方法内容介绍

<div class="box1">
  [站外图片上传中……(5)]
</div>
div{
 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.多行文本的垂直居中方法

有时可能我们会遇到需要多行文本垂直居中的一些情况,但是做起来有时有些麻烦,需要我们换个思路去实现。

<div class="box3">
  <span>你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据你好,我是测试数据</span>
</div>
div{
 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+)。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持路饭。


本文地址:http://www.45fan.com/dnjc/95574.html
Tags: css 大小 实例
编辑:路饭网
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部