html + css 布局技巧总结 ——单列布局（3）

单列布局

1.水平居中

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

使用inline-block 和 text-align实现

.parent{
   text-align: center;}
.child{
   display: inline-block;}

优点：兼容性好；
不足：需要同时设置子元素和父元素

例子：

<style>
	
	.parent {
   
		height: 300px;
		width: 800px;
		border: solid 1px #2AC845;
		float: right;
		/* text-align: center; */ //设置父元素
	}
	 
	 .children {
   
	     width:300px;
		 background-color: pink;
		 margin-left: 20px;
		 border: solid 1px #0062CC;
		 /* display: inline-block; */ //设置子元素
	 }
 
	</style>

放开注释代码效果。