zoukankan      html  css  js  c++  java
  • css 使元素居中

    css使元素水平居中

    1.对于行内元素的水平居中

    给父元素设置text-align:center

    <div style="text-align:center;">居中显示</div>

    2.定宽块状元素水平居中

    <div style="200px;margin:20px auto;";>居中显示</div>

    注:对于以上情况可以灵活应用

    可以将元素设置 display:inline ,将其变为行内元素,再按照上面的方法1

    也可将元素设置 display:block,将其变为块状元素,再按照上面的方法2

    参考地址:http://blog.csdn.net/oHeHeHou/article/details/52820794

    css使元素水平数值都居中

    1.  绝对定位下top left right bottom 都设置0,再margin: auto 就可以将元素垂直水平居中

    css垂直居中

    参考:http://blog.zhourunsheng.com/2012/03/css-元素垂直居中的-6种方法/

    利用CSS进行元素的水平居中,比较简单,行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可。本文收集了六种利用css进行元素的垂直居中的方法,每一种适用于不同的情况,在实际的使用过程中选择某一种方法即可。

    Line-Height Method

    line height demo
    试用:单行文本垂直居中,demo

    代码:

    html

    1
    2
    3
    
    <div id="parent">
    <div id="child">Text here</div>
    </div>

    css

    1
    2
    3
    
    #child {
    line-height: 200px;
    }

    垂直居中一张图片,代码如下

    html

    1
    2
    3
    
    <div id="parent">
    <img src="image.png" alt="" />
    </div>

    css

    1
    2
    3
    4
    5
    6
    
    #parent {
    line-height: 200px;
    }
    #parent img {
    vertical-align: middle;
    }

    CSS Table Method

    table cell demo

    适用:通用,demo

    代码:

    html

    1
    2
    3
    
    <div id="parent">
    <div id="child">Content here</div>
    </div>

    css

    1
    2
    3
    4
    5
    
    #parent {display: table;}
    #child {
    display: table-cell;
    vertical-align: middle;
    }

    低版本 IE fix bug:

    1
    2
    3
    
    #child {
    display: inline-block;
    }

    Absolute Positioning and Negative Margin

    absolute positioning and negative margin demo

    适用:块级元素,demo

    代码:

    html

    1
    2
    3
    
    <div id="parent">
    <div id="child">Content here</div>
    </div>

    css

    1
    2
    3
    4
    5
    6
    7
    8
    9
    
    #parent {position: relative;}
    #child {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 30%;
    width: 50%;
    margin: -15% 0 0 -25%;
    }

    Absolute Positioning and Stretching

    absolute positioning and vertical stretching demo

    适用:通用,但在IE版本低于7时不能正常工作,demo

    代码:

    html

    1
    2
    3
    
    <div id="parent">
    <div id="child">Content here</div>
    </div>

    css

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    
    #parent {position: relative;}
    #child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 30%;
    margin: auto;
    }

    Equal Top and Bottom Padding

    vertical centering with padding demo

    适用:通用,demo

    代码:

    html

    1
    2
    3
    
    <div id="parent">
    <div id="child">Content here</div>
    </div>

    css

    1
    2
    3
    4
    5
    6
    
    #parent {
    padding: 5% 0;
    }
    #child {
    padding: 10% 0;
    }

    Floater Div

    vertical centering with floater div demo

    适用:通用,demo

    代码:

    html

    1
    2
    3
    4
    
    <div id="parent">
    <div id="floater"></div>
    <div id="child">Content here</div>
    </div>

    css

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    
    #parent {height: 250px;}
    #floater {
    float: left;
    height: 50%;
    width: 100%;
    margin-bottom: -50px;
    }
    #child {
    clear: both;
    height: 100px;
    }
  • 相关阅读:
    day01--计算机硬件基础笔记
    22 Jun 18 Django,ORM
    21 Jun 18 Django,ORM
    20 Jun 18 复习, mysql
    20 Jun 18 Django,ORM
    19 Jun 18 复习, 正则表达式
    19 Jun 18 Django
    15 Jun 18 复习, shutil模块
    15 Jun 18 Django
    14 Jun 18 复习, form表单
  • 原文地址:https://www.cnblogs.com/zhuchenglin/p/6842767.html
Copyright © 2011-2022 走看看