在网页中常用到的几种居中方法

1、行内元素水平居中,可以在父元素中使用text-align:center;垂直居中可以用,line-height:100px;例如:

1
2
3
4
5
6
7
8
9
10
11
<style type="text/css">
    div{
        width:300px;
        height:100px;
        text-align:center;
        line-height:100px;
    }
</style>
<div>
    <span>文字居中</span>
</div>

2、块级元素水平居中,可以用margin:auto;代码如下:

1
2
3
4
5
6
7
8
9
10
11
<style type="text/css">
    div{
        width:300px;
        height:100px;
        margin:0px auto;//上下边距为0,水平居中
        background:#ccc;
    }
</style>
<div>
    <span>文字居中</span>
</div>

3、元素绝对居中,利用定位position,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style type="text/css">
    div{
        width:300px;
        height:100px;
        position:relative;
    }
    div p{
        width:100px;
        height:20px;
        position:absolute;
        margin:auto;
        top:0;
        bottom:0;
        left:0;
        right:0;
    }
</style>
<div>
    <p>文字居中</p>
</div>

4、元素绝对居中的另一种方法,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style type="text/css">
    div{
        width:300px;
        height:100px;
        position:relative;
        background:#bbb;
    }
    div p{
        width:100px;
        height:20px;
        position:absolute;
        top:50%;
        margin-top:-10px;
        left:50%;
        margin-left:-50px;
    }
</style>
<div>
    <p>文字居中</p>
</div>

 

分享本文至:


发布时间:2017-11-15 16:36 Wednesday
  • 版权声明:除非注明,文章均为【石家庄SEO】原创,欢迎转载!转载请注明本文地址,谢谢!

  • 作者:石家庄SEO

    东轩,IT专业,主攻网站前端设计制作方面以及seo技术。博主现在单身哦。有单身的小姐姐可以私信博主。

    返回列表
    上一篇:
    下一篇:

    发表评论

    快捷回复: