您好!欢迎进入紫石头原创模板堂!
网站首页 | 购买流程 | 关于我们 |  联系方式 |  客服热线:0371-56789-390
当前位置:首页 >> 建站知识 >> 详情
扫二维码关注紫石头原创模板堂 4大优势,全网首家
  • NO.1

    模板类网站比起独立设计的网站来讲价格低的多,因为很多东西是已经做成的,成本就低很多!

  • NO.2

    开源模板网站,任意修改使用!服务好到没话说!模板建站经常被贴上服务差的标签,而紫石头完全打破这样的格局!

  • NO.3

    模板网站还享受设计型网站同等级售后服务,这不是做梦!紫石头原创模板站,让这一切变为可能!

  • NO.4

    建站速度快,购买后简单修改即可投入使用。设计型网站正常需要10~20个工作日,而模板站只需要几个小时!

免费咨询热线
0371-56789-390

CSS实现页面元素居中的方法总结
发表:紫石头原创模板堂    发表时间:2019-09-20 10:38:25    阅读:113
    网页元素居中分为:垂直居中、水平居中、水平垂直都居中三种情况。这三种情况通过css都是可以实现的。下面,紫石头快速建站小编就来总结一下有哪些方法可以达到目的。
    一:水平居中
    1、文字水平居中:
    p{ width:800px; text-align:center; }
    p元素宽度800像素,文字水平居中。要设置宽度哦,没有宽度,如何居中。
    2、div元素水平居中:
    方法1:通过百分比来控制左右2边的距离
    div{ width:80%; margin:0 10%; }
    方法2:通过margin:0 auto;
    div{ width:400px; margin:0 auto; }
    div元素中不能添加浮动float,否则居中会失效。
    二:垂直居中
    文字或内连元素实现垂直居中。
    方法一:通过line-height
    p{ height:30px; line-height:30px; }
    方法二:通过padding
    p{ padding:10px 0; }
    方法三:vertical-align
    <div style="width: 400px;height:100px;background: #ccc; ">
    <em style="vertical-align: middle;">hhhh</em>
    <span style="vertical-align: middle; display:inline-block;height: 100%"></span>
    </div>
    em元素的居中,是以<span>行内元素的最高值进行居中的,以上<em>标签是以<span>的高度进行居中的。span元素必须设置成inline-block内连块状元素。如果去掉<span>,em自己通过vertical-align:middle 是实现不了垂直居中的。
    verticla-aling在表格的单元格中也是可以使用的。
    三:水平垂直都居中
    水平和垂直都居中,这种情况不是很常用,但是有时,还是要用到的,如:弹窗,显示在水平垂直都居中比较友好。
    div{
    width:300px; height:300px;
    position:fixed;
    margin:auto;
    top:0;
    bottom:0;
    left:0;
    right:0;
    }
    这里用到了position:fiexed 绝对定位。这是相对于整个页面的居中。如果想让一个div元素相对于父元素水平垂直居中,可以把position:absolute相对定位,这要求父元素设置相对定位position:relative 。
模板推荐
工作时间:周一至周五(08:30~18:00)
Copyright ©2003-2020 永易搜旗下紫石头原创模板堂 All Rights Reserved 豫ICP备14011598号-7 营业执照