转载的一篇文章,讲解css内容居中的。
网上有关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居中的文章,个人感觉不错,值得收藏。
一、水平居中
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
相关推荐
DIV+CSS网页布局入门实例详解,本教程通过一个实例详从最基础的东东讲解网页布局
css样式 index 样式应用css样式 index 样式应用基础的实力引用 实例
此为《HTML5开发精要与实例详解》的全部配套源码 本书由资深Web开发专家亲自执笔,内容的权威性上应该是毋庸置疑的。 本书在内容结构上将继承《HTML 5与CSS 3权威指南》一书的优点,几乎每个知识点都将配一个精心...
div css实例div css实例div css实例
微信小程序 利用css实现遮罩效果实例详解 实现效果图: 如图所示,使用css实现小程序的遮罩效果,代码如下 js文件代码: //index.js //获取应用实例 var app = getApp() Page({ data: { flag: false }, a: ...
CSS+DIV设计实例:实现让多个DIV排列时居中.txt
CSSchange Ajax的局部更新。 CSSglass 用CSS制作会发光的字体。 CSSmenu 用Ajax+CSS制作动态菜单。 CSSshadow 用CSS制作投影效果。
xHTML+CSS+Dreamweaver CS3原书实例代码,从第二章到最后一章。
这是一个css+div应用集合实例,W3C。
CSS实现完美垂直居中 - 蓝色理想
主要介绍了CSS在固定宽高的div内实现垂直居中的实例详解,即在div内部元素相对于div垂直居中的方法,需要的朋友可以参考下
js+css实现导航效果实例.docx
div+css详解,实例,对于学习div css有一定的帮助。。
CSS相册的运用实例页面,可以学习一下自己做个CSS相册!
css+div的实例网页,从中可以充分地了解到网页时如何布局的。
几个漂亮网站首页的源码(全),学习css和自己设计网页的一大助力。
CSS布局 案例详解 CSS布局 案例详解 CSS布局 案例详解CSS布局 案例详解 CSS布局 案例详解
HTML CSS JAVASCRIPT标准教程 实例版_0