当前位置:首页 » 好文分享 » 详情

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

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>

打赏
X
打赏方式:
  • 支付宝
  • 微信
  • QQ红包

打开支付宝扫一扫
日期:2017年11月22日 07:26:12 星期二   分类:好文分享   浏览(14095)
本文地址:https://likinming.com/post-2871.html   [百度未收录]
声明:本页信息由网友自行发布或来源于网络,真实性、合法性由发布人负责,请仔细甄别!本站只为传递信息,我们不做任何双方证明,也不承担任何法律责任。文章内容若侵犯你的权益,请联系本站删除!
版权所有:《博客之家
文章标题:《在网页中常用到的几种居中方法
除非注明,文章均为 《博客之家》 原创
转载请注明本文短网址:https://likinming.com/post-2871.html  [生成短网址]

留言咨询

自动获取QQ

昵称

邮箱

网址

申请收录

    申请收录

网址缩短服务

    网址缩短服务
Copyright © 2020 博客之家 版权所有  
關於本站免責聲明sitemap新站登錄