CSS居中的实现用法实例
这里分享的这篇有关css居中的文章,个人感觉不错,值得收藏。
一、水平居中
1,将元素水平居中(use margin & width property)
css code:
div.h_align{
border: 1px solid black;
margin: 0 auto;
width: 50%;/*必须指定宽度,可为百分比或像素值*/
}
html code:
<div class="h_align">我用margin:0 auto!come on 求水平居中!</div>
小结:
使用上述方法水平居中,必须指定宽度
compatibility:
Firefox\Chrome\Safari\Opera\IE 9 8 7 6
2.将元素水平居中(use absolute position & width)
css code:
div.pos{
border: 1px solid red;
position: absolute;
left: 50%;
width: 300px;
margin-left: -150px;
}
html code:
<div class="pos">我用绝对定位!同求水平居中!</div>
小结:
利用绝对定位 left 50%以后,使负外边距的值为元素宽度的一半,从而实现居中(这个思路也可以用在垂直居中上)
compatibility:
Firefox\Chrome\Safari\Opera\IE 9
IE 8及以下均不兼容,等我以后写个解析
3.将元素水平居中(IE 6\7 solution)
css code:
div.textAlign{
margin-top:100px;
text-align: center;
}
div.textAlign div{
text-align: left;
width:500px;
background-color:green;
}
html code:
<div class="textAlign"><!--text-align:center IE7 6-->
<div>来来来来来来来~~~ text-align :center!只能把我用在IE6 7!</div>
</div>
小结:
在低版本IE中,text-align不仅用于文本,也用于元素本身的位置偏移,因此在IE6 7中使用text-align会使子元素也随着文本一并居中,此时只要在子元素中应用一次text-align:left就可以实现元素水平居中
compatibility:
IE 7\6
二、垂直居中
1.单行文本垂直居中
css code:
p.single_line{
border: 1px solid green;
/*key code:*/
height: 4em;
line-height: 4em;
overflow: hidden;
}
html code:
<p class="single_line">我是单行文本!我有100px高,我要垂直居中!</p>
小结:
(1)key:令行距和元素高度相同,这样就限定了容器内只能容纳一行文本内容,于是文本就居中了
(2)设定height和line-height时,推荐使用相对单位em,这样能够在字体非常大的时候,依然保持居中
(3)overflow:hidden是必须的,理由同上,也是为了保持居中
(4)优点:块元素和行内元素均适用此方法,并且在主流浏览器中适用
(5)缺点:文本长度有限(最多只能一行),且对于非文本的元素无效
2.无固定高度的多行文本垂直居中
css code:
p.multi_line{
border: 1px solid gray;
width: 100px;
/*key code:*/
padding-top: 30px;
padding-bottom: 30px;
}
html code:
<p class="multi_line">我是多行文本!我宽100px但是没有固定高度!跪求垂直居中!</p>
小结:
(1)key:令上内边距和下内边距相等。值是多少无所谓,相等即可,使用上下外边距相等也可
(2)优点:块元素和行内元素均适用此方法,非文本元素也可以使用,并且在主流浏览器中适用
(3)缺点:无法设置高度
3.将固定高度的容器模拟表格布局实现垂直居中
css code:
div.wrap1{
border: 1px solid black;
/*key code:*/
display:table;
height:300px;
}
div.wrap2{
/*key code:*/
display:table-row;
}
div.wrap3{
/*key code:*/
display:table-cell;
vertical-align:middle;
}
div.maincontent{
width:350px;
background-color:black;
color: white;
/*key code:*/
height:90px;/* less than wrap1.height */
}
html code:
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<div class="maincontent">脚本学堂---提示:高300px,我自己是350 X 90 px,我也可以居中啦哇哈哈,可是别在IE6/7下看我噢</div>
<!-- other content -->
</div>
</div>
</div>
小结:
(1)key:使用display属性中的table、table-row、table-cell来将元素模拟成表格布局。处于wrap3中的所有元素都会垂直居中,但是它们的高度总和不能超过wrap1的高度
(2)使用display:table-cell的时候必须同时在祖先元素使用display:table
(3)缺点:不能在IE6/7下实现
4.IE7及以下的解决办法
css code:
div.IE7wrap1{
border: 1px solid pink;
/*key code:*/
height: 300px;
position: relative;
}
div.IE7wrap2{
/*key code:*/
position: absolute;
top: 50%;
left: 0;
}
div.IE7maincontent{
width:350px;
background-color:black;
color: white;
height: 90px;
/*key code:*/
position: relative;
top:-50%;
left: 0;
}
html code:
<div class="IE7wrap1">
<div class="IE7wrap2">
<div class="IE7maincontent">嘿哥们,我是IE6/7的解决方案,要看我就要用IE6/7,不然我丑爆了</div>
</div>
</div>
小结:
(1)算是一个css hack,服务于IE6/7
CSS居中的实现用法实例的更多相关文章
- Jquery + css 日期控件用法实例.zip
/*==============================================================================** Filename:common.j ...
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结
vue—你必须知道的 目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...
- CSS居中demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...
- 一个CSS中Z-index的用法
一个CSS中Z-index的用法 CSS教程:彻底掌握Z-index属性 大多数的CSS属性都很容易使用.常常,当您对标记语言的元素使用CSS属性时,产生的结果会随着您刷新页面而立即呈现.而另 ...
- CSS 居中大全【转】
我看最近微博流行 CSS 居中技术,老外码农争相写相关的文章,一篇赛一篇的长啊,我把几篇归纳总结了一下,算是笔记. 孔乙己曾说:“茴香豆的回字有四种写法”,万一哪天有个面试官问你:“居中一共有几种写法 ...
- CSS预处理器之SASS用法指南
CSS预处理器之SASS用法指南 一.什么是SASS Sass是是一种基于ruby编写的CSS预处理器,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 诞生于200 ...
- 各种div+css居中方式调整(转载)
盘点8种CSS实现垂直居中水平居中的绝对定位居中技术 分类: 前端开发2013-09-11 21:06 24959人阅读 评论(3) 收藏 举报 绝对居中垂直居中水平居中CSS居中代码 目录(?) ...
- jQuery中on()方法用法实例详解
这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能及各种常见的使用技巧,并对比分析了与bind(),live(),delegate()等方法的区别,需要的朋友可以参考下 本 ...
- CSS 居中大全(转)
引用:http://jinlong.github.io/blog/2013/08/13/centering-all-the-directions/ CSS 居中大全 AUG 13TH, 2013 | ...
随机推荐
- Entity Framework 使用注意:Where查询条件中用到的关联实体不需要Include
来自博客园开发团队开发前线最新消息: 在Entity Framework中,如果实体A关联了实体B,你想在加载实体A的同时加载实体B.通常做法是在LINQ查询中使用Include().但是,如果你在查 ...
- Hastiness
Problem Description How many problems did you AC?When you read this problem, don’t hasty and careles ...
- Amazon 开始接受 Windows 礼品卡预订
在 8 月微软虚拟货币系统 Microsoft Points 已经正式被真实货币替代,但目前,配套真实货币系统将推出的礼品卡还并没有开始销售.Amazon 上的一则预订显示“Windows 礼品卡”( ...
- iOS block进行页面之间传值
#import <UIKit/UIKit.h> @interface FirstViewController : UIViewController @property (weak, non ...
- hadoop环境安装及简单Map-Reduce示例
说明:这篇博客来自我的csdn博客,http://blog.csdn.net/lxxgreat/article/details/7753511 一.参考书:<hadoop权威指南--第二版(中文 ...
- 沈逸老师PHP魔鬼特训笔记(10)
为了防止代码让我们混淆不清,大家看视频中的分离方法 1.新建了一个文件夹叫code (这代表是代码) 2.再新建一个文件夹叫page (这代表是页面) 代码该怎么写呢? 这里要记住口诀 1.index ...
- 一:Html基本结构
1:什么是Html(HTML 概念)? Html是 HyperText mark-up Language 的缩写,意思是:超文本标记语言 2.HTML的发展史? 1991年:出现Html1.0(不存在 ...
- 对象(类)的封装方式(面向对象的js基本知识)
上一个月一直忙于项目,没写过笔记,今天稍微空下来了一点 前几天在写项目的时候关于怎么去封装每一个组件的时候思考到几种方式,这里总结一下: 1.构造函数方式(类似java写类的方式):把所有的属性和方法 ...
- [python] HDU自动登录提交代码程序
调了一个下午,被python的正则绊住了:在C#上运作好好的式子在python老是报错,原来python的断言式必须是固定长度的,像类似(?<=[^>].*?)的零宽度正回顾后发断言是不允 ...
- .NET DLL 保护措施详解(五)常规条件下的破解
为了证实在常规手段破解下能有效保护程序核心功能(演示版本对AES加解密算法及数据库的密钥(一段字符串)进行了保护),特对此DLL保护思路进行相应的测试,包含了反编译及反射测试,看是否能得到AES加解密 ...