Html和CSS布局技巧-单列布局（一）

git 地址： https://gitee.com/renyangli123/bokeyuan.git

一、单列布局

（1）水平居中

　　水平居中的页面布局中最为常见的一种布局形式，多出现于标题，以及内容区域的组织形式，下面介绍四种实现水平居中的方法（注：下面各个实例中实现的是child元素的对齐操作，child元素的父容器是parent元素）

//使用inline-block 和 text-align实现

//使用inline-block 和 text-align实现
//优点：兼容性好；
//不足：需要同时设置子元素和父元素


<style media="screen">
.parent{
    text-align: center;
    border: 1px solid #000;
}
.child{
    display: inline-block;
    border:1px solid #000;
}
</style>
<body>
<div class="parent">
    <div class="child">
            水平居中
    </div>
</div>
</body>

View Code