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

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>

 

本博客所有文章如无特别注明均为原创。作者:东轩oba复制或转载请以超链接形式注明转自 东轩博客一个自媒体的个人优秀博客园
原文地址《在网页中常用到的几种居中方法

相关推荐

发表评论

路人甲 表情
Ctrl+Enter快速提交

网友评论(0)