居中详解
讲解
1,单行文本的居中:
<div class='center'><span>单行文本框居中</span></div>
.center{width:300px;height:300px;line-height:300px;}
2, 多行文本的居中:
1)
<div class='c1'><span class='c2'>多行文本框居中。。。。。。。</span></div>
.c1{width:300px;height:300px; display:table-cell;vertical-align:middle;border:3px solid red;}
.c2{vertical-alignn:middle;display:inline-block;}
注意,包含框div不能浮动;对多行文本采用图像的处理方式(inline-block)。
2)
<div style="border: 1px dashed darkcyan;line-height:150px;">
<span style="display: inline-block;vertical-align: middle;line-height: 1.4;">这是一个测试</br>
为了测试文本居中</span><i style="width:0;vertical-align: middle;display: inline-block;"> </i>
</div>
3, 不定大小图片的居中:
可以采用background-img来进行控制,使用一个pixel.gif放在浮动层,并将浮动层覆盖至包含框大小,最后对<img>进行设置背景。
<ul>
<li><img src='img/pixel.gif' style='background-image:url(img/mm1.jpg);'/></li>
<li><img src='img/pixel.gif' style='background-image:url(img/mm2.jpg);'/></li>
<li><img src='img/pixel.gif' style='background-image:url(img/mm3.jpg);'/></li>
</ul>
ul{list-style:none;}
li{width:128px;height:128px;border:1px solid #beceeb;float:left;margin-right:10px;}
li img{display:block;width:100%;height:100%;background-repeat:no-repeat;background-position:center;}
4, 不定大小图片居中2:
使用display:table-cell实现。对于ie6,7的兼容性问题,可以使用css hack。ie67默认内部实现了一个抽象的文字空间,可以通过设置font-size来改变文字空间的大小。将font-size设置得很大,目的是撑开IE下默认文字空间的高度,其性质类似于空格,然后通过vertical-align:middle属性让图片与这个高高的空白空格空间垂直居中对齐;但是不支持img外标签的浮动,所以需要在img外添加一层div。
<ul>
<li class='c1'><img class='c2' src='img/mm1.jpg' /></li>
<li class='c1'><img class='c2' src='img/mm1.jpg' /></li>
<li class='c1'><img class='c2' src='img/mm1.jpg' /></li>
</ul>
li{margin-right:10px;border:1px solid red;}
.c1{width:128px;height:128px;display:table-cell;vertical-align:middle;text-align:center;font-size:128*0.873px;}
.c2{vertical-align:middle;}
5, 不定大小图片居中3:
使用一个1像素的图片或者使用span使其高度100%,宽度为0,使其撑满包含块,让其垂直居中,然后对要居中的图片进行垂直居中即可。
原理简述:
一句话,将要显示的图片与一张透明的高度100%,宽度1像素的透明图片vertical-align:middle对齐。 在行内格式化上下午中,行框的高度应包含该行内所有行内框的高度,所以我们可以通过一个额外的行内块元素(可以设置高度,而且属于行框范围内)来将行框的高度撑满,然后对需要居中对齐的图片设置vertical-align属性来将元素居中对其。缺点是添加了额外的标签,好处是兼容性好。
<li style="float: left;border: 1px solid #b3d4fc;width:140px;height:128px;font-size: 0px;text-align: center;">
<img style="height:100%;width:0px;vertical-align: middle;" src="img/pixel.gif">
<img style="vertical-align: middle;" src="img/mm1.jpg"/>
</li>
6,一个元素在包含块中的水平垂直居中对齐:
{
position: absolute;
top: 0%;
right: 0%;
bottom: 0%;
left: 0%;
margin: auto;
}
原理可参考 绝对定位下的盒模型
最后,在此推荐一篇总结的比较全面的文章,尤其是其提到的最后一种利用flex布局的align-items属性进行垂直布局,可以进行扩展。
- ASP.NET MVC5+EF6+EasyUI 后台管理系统--工作流演示截图
- 基于CPPN与GAN+VAE生成高分辨率图像
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(54)-工作流设计-所有流程监控
- (收藏)搭建.NET Framework 3.0开发环境 及SharePoint 2007/WSS 3环境
- WCF技术剖析之八:ClientBase<T>中对ChannelFactory<T>的缓存机制
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(48)-工作流设计-起草新申请
- 把windows2003“搬”到手机上。
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(53)-工作流设计-我的批阅
- ASP.NET MVC5+EF6+EasyUI 后台管理系统--任务调度系统解析
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(52)-美化EasyUI皮肤和图标
- ASP.NET MVC5+EF6+EasyUI 后台管理系统--系统权限全套完整图
- 互联网时代的产品升级和用户反馈故事
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(50)-Easyui 扁平化皮肤
- 微信终于做了它最擅长的业务,市场已经轰动
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- JavaWeb——AJAX异步技术实现方式与案例实战(原生的JS方式、使用JQuery方式)
- JavaWeb——一文带你入门Servlet(生命周期、注解配置方法、IDEA与tomcat的相关配置)
- JavaWeb——JQuery之基础案例实战(实现表格隔行换色、实现全选全不选、QQ表情选择、下拉列表选中条目左右选择功能)
- JavaWeb——JQuery之DOM操作应用及实践案例总结(DOM内容操作、DOM属性操作、CRUD操作)
- JavaWeb——Filter过滤器快速入门与是否登录验证&过滤敏感词汇案例实战(Filter配置方式、执行流程、生命周期方法、过滤器链)
- JavaWeb——会话技术之Session快速入门与验证码登录案例实战(Session实现原理、使用细节、快速入门、Session的特点)
- Nginx配置文件服务器
- JavaWeb——会话技术之Cookie快速入门与案例实战(详细讲解了Cookie实现原理、Cookie使用细节、Cookie的特点及作用)
- docker安装kibana
- JavaWeb——ServletContext对象的使用及文件下载案例实战
- (最新 9000 字 )Spring Boot 配置特性解析
- JavaWeb——HTTP响应协议及Response对象使用方法一点通及案例实战(重定向、输出字符/字节数据到浏览器、验证码实现)
- drf序列化器之反序列化的数据验证
- yum仅下载不安装---保留rpm包
- Java——数据库编程JDBC之JDBCTemplate的使用简化数据库操作步骤(含增删改查练习实例源码)