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+)。 (编辑:南京站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- 微软 Windows 10 Build 19044.1499 预览版上线
- Windows 11更新支持新Emoji表情与全新Media Player
- ‘ – ‘附近的语法不正确.(Microsoft SQL Server Native C
- bios如何设置关闭触控板功能?bios关闭触控板功能防止误碰触
- 微软上线 Windows 10 KB5009543 累积更新
- 将要出现在 Ubuntu 22.04 LTS 中的新功能
- 双十一 我依然爱你 只是不再喜欢你了
- windows-mobile – NETCF 3.9发布了吗?
- 需要询问闪存供应商的12个关键问题
- 如何优雅的在 Docker 中运行高性能负载均衡器 HAProxy