您的位置：首页 > Web前端 > CSS

CSS学习笔记05-垂直居中-内容居中-多行.html

2014-10-18 23:59 531 查看

<!DOCTYPE html>



<html>

<head>

<meta charset="utf-8" />

<title></title>

<style type="text/css">

*{margin:0px;padding:0pxs;}

body{text-align:center;}

#parent{

margin: 0px auto;

border: 2px solid rgb(255,0,0);

width: 400px;

height: auto;

padding-top: 10px;

padding-bottom: 10px;

-overflow: hidden;/*此时设置line-height观察效果*/

}

#child{

/*子块儿左右居中对齐*/

margin:auto;

border: 2px solid rgb(20,150,180);

width: 100px;

height: 60px;

}

</style>

</head>

<body>



<div id="parent">

<div id="child">

子块儿！！！！

多行内容居中,且容器高度可变：

只需设置

padding-top: === padding-bottom:

优点：

1.同时支持块级和内敛级元素

2.支持非文本内容

3.支持所有浏览器

缺点：

容器不能固定高度

</div>

</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航