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;

  • 相关阅读:
    【HDOJ】4347 The Closest M Points
    【HDOJ】4341 Gold miner
    【HDOJ】4333 Revolving Digits
    【HDOJ】4336 Card Collector
    【HDOJ】4328 Cut the cake
    【HDOJ】4322 Candy
    【HDOJ】4317 Unfair Nim
    串口接收线程退出与优先级问题
    EVC编程与调试过程出现的问题
    Windows CE创建桌面快捷方式
  • 原文地址:https://www.cnblogs.com/zppsakura/p/11377231.html
Copyright © 2011-2022 走看看