<!DOCTYPE html>
<!--
作者:1357751126@qq.com
时间:2014-09-19
描述:
>>>>
#.X{
height: ;
line-height: ;
over-flow: hidden;
}
-->
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{margin:0px;padding:0pxs;}
body{text-align:center;}
</style>
</head>
<body>
<!--
单行内容居中
只考虑单行是最简单的,无论是否给定容器的固定高度,
只要给容器设置line-height和height,并使其值相等,
再加上over-flow:hidden就可以了
<style type="text/css">
#.X{
height:;
line-height:;
over-flow:hidden;
}
/*
优点:
1.同时支持块和内联级元素
2.支持所有浏览器
缺点:
1.只能显示一行
2.IE中不支持<img>等的居中
注意:
1.使用相对高度定义你的height和line-height
2.不想毁了你的布局的话,over-flow:hidden;
++++++为什么?
有待深究!!!@@@@@@@@@@@@@@@@@@@@@@@@@@@@
*/
</style>
-->
<div style="
border: 1px solid rgb(150,10,2);
line-height:200px;
height:200px;
/*当line-height与height属性值相等时:内容在该块中垂直居中*/
over-flow:hidden;
">
<p>一行:this is a line content! </p>
<p>二行:this is a line content! </p>
</div>
<div style="
border: 1px solid rgb(150,10,2);
heigit:50px;
background-color:rgb(128,128,128);
margin-top:10px;
--普通对比块
">
当line-height:大于height:时
查看对其它块元素的影响。
该元素与上一个块元素紧紧挨在了一起,可见:
line-height属性的设置,不会影响同一个层面中其它块元素的所在位置。
</div>
</body>
</html>