欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

css-对齐方式进阶案例

程序员文章站 2022-04-26 16:02:04
...

居中对齐

行内元素居中对齐

// 父元素设置
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;
}

最后效果图:
css-对齐方式进阶案例

垂直居中

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