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 | ...
随机推荐
- 【源码】基于SQLite实现CMS论坛(BBS)----附件SQLite可视化界面客户端
使用说明:管理员账号:admin 密码:523523523 一. 账号管理(登陆注册审核) 1.账号注册 url:/BBS/Account/pregister.aspx 2 ...
- 1.6.9 UIMA Integration
1. UIMA 集成 你可以使用solr集成Apache的非结构化信息管理架构(UIMA).UIMA可以让你定义自己的分析引擎通道,逐步添加元数据到文档的标注. 关于Solr UIMA的更多信息,参考 ...
- C++-copy constructor、copy-assignment operator、destructor
本文由@呆代待殆原创,转载请注明出处. 对于一个类来说,我们把copy constructor.copy-assignment operator.move constructor.move-assig ...
- 在Archlinux ARM - Raspberry Pi上安装Google coder
升级软件包 一个 pacman 命令就可以升级整个系统.花费的时间取决于系统有多老.这个命令会同步非本地(local)软件仓库并升级系统的软件包: # pacman -Syu 提示:确保make以及g ...
- iOS - UI - UITextView
1.UITextView //因为继承于UIScrollView 拥有scrollView的所有属性和方法 //placeholder只有UITextField有,UITextView是没有的.(提示 ...
- iOS UINavigationController 详解
developer.apple.com/cn/ 导航条 UINavigationBar继承UIView 导航控制器 UINavigationController (压栈,出栈) ...
- c#代码使用ResourceDictionary样式
对于ResourceDictionary样式代码: <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006 ...
- easyui window自动居中(修复了iframe弹窗被遮盖问题)
$.extend($.fn.window.defaults, { onOpen:function(left, top){ var iframeWidth = $(this).parent().pare ...
- JS 获取WEB请求路径
function getRealPath(){ //获取当前网址,如: http://localhost:8083/myproj/view/my.jsp var curWwwPa ...
- IOS iphone 4inch上应用没有全屏,上下有黑边(转)
在编写IOS应用程序的过程中,我一直都是使用iPhone Retina(3.5-inch)模拟器测试的,一切显示正常,切图如下: 我在应用开发中,采用的是纯代码实现.公司提供了一部iPhone4s,我 ...