您现在的位置是：网站首页> 编程资料编程资料

CSS居中实例之大小不固定的图片居中方法_CSS教程_CSS_网页制作_

2023-11-05 159人已围观

简介本篇文章主要介绍了CSS居中实例之大小不固定的图片居中方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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

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

 [站外图片上传中……(5)]

 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{ 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 Flexbox的具体用法详解_CSS教程_CSS_网页制作_

下一篇：CSS 的加载及加载顺序简介_CSS教程_CSS_网页制作_

您现在的位置是：网站首页> 编程资料编程资料

CSS居中实例之大小不固定的图片居中方法_CSS教程_CSS_网页制作_

相关内容

点击排行

本栏推荐

猜你喜欢