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;
}