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+)。 (编辑:我爱故事小小网_铜陵站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- 联想公布Win11首批适配名单 包含老产品在列
- 智能锁需不需要加入对讲功能
- Win7 Eclipse 搭建spark java1.8环境:WordCount helloworl
- Win10更新KB5005565 KB5005566 再次造成打印机情况
- 数据中心如何建设,数据中心机房维护方法详解!
- Windows电脑优化实例解析
- 使用CSS3 font-feature-settings特性减除字体动画震颤效果
- xaml – Windows应用程序项目中不支持Type
- GCP - Running Windows Server Failover Clustering Step b
- 微软 Windows 11 Build 22000.466 预览版上线