CSS居中实例之大小不固定的图片居中方法

2024-07-11 08:41:39

字体：大中小

来源：转载

供稿：网友

本文介绍了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 的加载及加载顺序简介

下一篇：CSS Flexbox的具体用法详解