zoukankan      html  css  js  c++  java
  • 通过css 居中div的几种常用方法

    1.text-align:center方式

    .center{
      text-align:center;
    }
    center_text{
      display:inline-block;
      500px
    }

    2.margin:0 auto方式

    这种对齐方式要求内部元素(.content_text)是块级元素,并且不能脱离文档流(如设置position:absolute),否则无效。

    3.脱离文档流的居中方式(position:absolute)
    通过absolute的流体特性实现居中。(对立方向同时发生定位)
    .element{
    300px; height: 200px;
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    margin: auto;
    }

    4.display:table-cell
    display:table-cell配合width,text-align:center,vertical-align:middle让大小不固定元素垂直居中,这个方式将要对其的元素设置成为一个td,float、absolute等属性都会影响它的实现,不响应margin属性;

    5.垂直居中
    行内元素的垂直居中把height和line-height的值设置成一样的即可。

    **6.使用css3的translate水平垂直居中元素 **

    这种方式将脱离文档流的元素,设置top:50%,left:50%,然后使用transform来向左向上便宜半个内元素的宽和高。

    7.使用css3计算的方式居中元素calc

    这种方式同样是将脱离文档流的元素,然后使用计算的方式来设置top和left;

  • 相关阅读:
    用代码初始化AE控件许可
    打开shpfile,mdb,sde工作空间
    UESTC_Tournament CDOJ 124
    UESTC_Little Deer and Blue Cat CDOJ 1025
    UESTC_Judgment Day CDOJ 11
    UESTC_One Step Two Steps CDOJ 1027
    UESTC_In Galgame We Trust CDOJ 10
    UESTC_贪吃蛇 CDOJ 709
    UESTC_冰雪奇缘 CDOJ 843
    java 常用API 时间
  • 原文地址:https://www.cnblogs.com/zppsakura/p/11377231.html
Copyright © 2011-2022 走看看