css-对齐方式进阶案例

居中对齐

行内元素居中对齐

// 父元素设置
div
{
text-align:center;
}

块级元素居中对齐

固定宽度，设置margin

div
{
width:200px;
margin:0 auto;
}

使用

<table>

标签

因为

<table>

标签自适应内容宽度，相当于固定宽度

table
{
margin:0 auto;
}

使用

display

改变成为行内元素：

div
{
display:inline;
text-align:center;
}

使用float及position属性：

// 父元素设置
div
{
float:left;
position:relative;
left:50%;
}
// 需要居中的子元素设置
div h1
{
position:relative;
left:-50%;
}

首先父元素向右浮动父元素的50%，然后子元素再向左浮动子元素的50%，即实现了子元素居中对齐。这样虽然子元素居中对齐，但是使用float属性后，该元素不在文档流中，可能于其他布局重合，此时要使用

clear:both

来清除浮动属性，才能正常显示。

这样，我们要实现一个分页的样式，可以用下面方式：

// html代码
<div>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>

方式一：

div
{
display:inline;
text-align:center;
}
div ul
{
list-style:none;
}
div li
{
display:inline;
border:red solid;
padding:5px;
}

方式二：

div
{
float:left;
left:50%;
position:relative;
}
div ul
{
list-style:none;
position:relative;
left:-50%;
}
div li
{
display:inline;
border:red solid;
padding:5px;
}

最后效果图：

垂直居中

使用

vertical-align:middle

属性就可以实现垂直居中，在

<table>

标签中的td默认该属性，块级元素可以使用

display:table-cell

然后激活

vertical-align

属性。

左右对齐

使用position属性

.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}

使用float属性

.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}