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

1、行内元素水平居中,可以在父元素中使用text-align:center;垂直居中可以用,line-height:100px;例如:
<style type="text/css">
    div{
        width:300px;
        height:100px;
        text-align:center;
        line-height:100px;
    }
</style>
<div>
    <span>文字居中</span>
</div>

2、块级元素水平居中,可以用margin:auto;代码如下:
<style type="text/css">
    div{
        width:300px;
        height:100px;
        margin:0px auto;//上下边距为0,水平居中
        background:#ccc;
    }
</style>
<div>
    <span>文字居中</span>
</div>

3、元素绝对居中,利用定位position,代码如下:
<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、元素绝对居中的另一种方法,代码如下:
<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>

版权所有:《博客之家
文章标题:《在网页中常用到的几种居中方法
除非注明,文章均为 《博客之家》 原创
转载请注明本文短网址:http://bk.likinming.com/post-871.html  [生成短网址]

日期:2017年11月22日 星期三   分类:好文分享   浏览(1627)

留言/评论:◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

填写好QQ号码,任点空白处自动获取

昵称

邮箱

网址

网站提交

  • 名称:
  • 网址:
Copyright © 2012 - 2017 by 李明关于本站免责声明本站下载站点地图sitemap广告联系