您现在的位置是：网站首页> 编程资料编程资料
CSS居中实例之大小不固定的图片居中方法_CSS教程_CSS_网页制作_
2021-09-10
1072人已围观
简介 本篇文章主要介绍了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学习笔记之常用Mixin封装实例代码_CSS教程_CSS_网页制作_
- 如何理解 CSS 布局和块级格式上下文_CSS教程_CSS_网页制作_
- css实现图片横向排列滚动效果_CSS教程_CSS_网页制作_
- 5分钟教你学会 CSS Grid 布局_CSS教程_CSS_网页制作_
- CSS网格布局的示例代码_CSS教程_CSS_网页制作_
- css制作三分圆形效果_CSS教程_CSS_网页制作_
- 纯 CSS 实现多行文字截断功能_CSS教程_CSS_网页制作_
- css实现毛毛虫爬行动作_CSS教程_CSS_网页制作_
- CSS Tips：段落每行渐变色文本效果的实现方法_CSS教程_CSS_网页制作_
