南强小屋 Design By 杰米
本文介绍了CSS居中实例之大小不固定的图片居中方法，分享给大家，具体如下：
1.利用table-cell实现垂直居中
<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+)。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
标签：
CSS不固定图片居中
南强小屋 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
南强小屋 Design By 杰米
暂无CSS居中实例之大小不固定的图片居中方法的评论...