• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > HTML5与CSS3.0 > CSS完美实现元素居中的一些总结

    CSS完美实现元素居中的一些总结

    作者: 分类:HTML5与CSS3.0 点击: 74 次
    wordpress CMS主题:ssmay主题

      网页元素居中分为:元素水平居中、元素垂直居中、元素水平垂直都居中。当然,我们使用最多的还是元素水平居中。元素垂直居中有时也会用到,如表格中和表单中可能会用到。元素的水平和垂直方向都居中,这个用的比较少,但有时也会用到,如:用户登录弹窗、客服弹窗等,这些可能就会用到水平和垂直都要居中。不管是什么居中,我们通过css都是可以比较容易实现的。下面,我就来就以往的学习使用到的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 。

      好了,以上就是我对页面元素居中的一些总。如果还有哪些没有写到,请在底部留言哦,我们后期进一步完善。

    文章作者:hero2018
    本文地址:http://wanlimm.com/77201808036418.html
    本文时间:2018-08-03 09:33:29
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.