成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

如何讓元素水平垂直居中

Jason / 2470人閱讀

摘要：我們經(jīng)常遇到需要把中的內(nèi)容進(jìn)行水平和垂直居中多數(shù)是將圖片水平垂直居中，這里把我常用的一些方法總結(jié)一下，可能比較，煩請(qǐng)大家指正方法需要有兩個(gè)容器包住，上代碼頁(yè)面效果頁(yè)面效果代碼兼容容器中只有一個(gè)，沒有其他元素，可通過(guò)方

我們經(jīng)常遇到需要把div中的內(nèi)容進(jìn)行水平和垂直居中（多數(shù)是將圖片水平垂直居中），這里把我常用的一些方法總結(jié)一下，可能比較low，煩請(qǐng)大家指正

table-cell方法
需要有兩個(gè)容器包住img，上代碼：

HTML

CSS

*{
    padding:0;
    margin:0;
}
.box{
    background-color:#eee;
    border:2px solid #000;
    width:500px;
    height:500px;
    margin:50px auto;
    display:table;
}
.wrapper{
    text-align:center;
    display:table-cell;
    vertical-align:middle;
}

IE8/Firefox/Chrome/Safari/Opera頁(yè)面效果：

IE6/IE7頁(yè)面效果：

IE6/7代碼兼容：

容器中只有一個(gè)img，沒有其他元素，可通過(guò)vertical-align方法居中
當(dāng)容器中只有一個(gè)img，并且img的狀態(tài)是行內(nèi)元素時(shí)，可以通過(guò)設(shè)置行高為容器高度，設(shè)置img的vertical-align：middle居中，代碼：

div{
    height:300px;
    line-height:300px;
    text-align:center;
}
div > img{
    vertical-align:middle;
}

已知要居中元素的寬高，可以通過(guò)定位的方法來(lái)實(shí)現(xiàn)垂直水平居中
比如說(shuō)要將div中的img居中，已知img高度規(guī)定為300*200，則代碼如下：

div{
    position:relative;
}
div > img{
    width:300px;
    height:200px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-100px;
    margin-left:-150px;
}

還有一種定位方法
html

css

.dad{
    position:relative;
}
.son{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;  //這是必須的
}

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111952.html

相關(guān)文章

  • 如何居中一個(gè)元素（終結(jié)版）

    摘要：源代碼演示利用將要水平排列的塊狀元素設(shè)為，然后在父級(jí)元素上設(shè)置，達(dá)到與上面的行內(nèi)元素的水平居中一樣的效果。 前言 本文主要介紹水平居中，垂直居中，還有水平垂直居中各種辦法，思維導(dǎo)圖如下： showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思維導(dǎo)圖，請(qǐng)猛戳Github個(gè)人博客 一、水平居中 1.行內(nèi)元素水平居...

    Hydrogen 評(píng)論0 收藏0

  • 如何居中一個(gè)元素（終結(jié)版）

    摘要：源代碼演示利用將要水平排列的塊狀元素設(shè)為，然后在父級(jí)元素上設(shè)置，達(dá)到與上面的行內(nèi)元素的水平居中一樣的效果。 前言 本文主要介紹水平居中，垂直居中，還有水平垂直居中各種辦法，思維導(dǎo)圖如下： showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思維導(dǎo)圖，請(qǐng)猛戳Github個(gè)人博客 一、水平居中 1.行內(nèi)元素水平居...

    hlcc 評(píng)論0 收藏0

  • 如何居中一個(gè)元素（終結(jié)版）

    摘要：源代碼演示利用將要水平排列的塊狀元素設(shè)為，然后在父級(jí)元素上設(shè)置，達(dá)到與上面的行內(nèi)元素的水平居中一樣的效果。 前言 本文主要介紹水平居中，垂直居中，還有水平垂直居中各種辦法，思維導(dǎo)圖如下： showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思維導(dǎo)圖，請(qǐng)猛戳Github個(gè)人博客 一、水平居中 1.行內(nèi)元素水平居...

    Meils 評(píng)論0 收藏0

  • css 元素居中

    摘要：一水平居中行內(nèi)元素水平居中在父元素上設(shè)置使文字圖片水平居中。結(jié)果如圖塊級(jí)元素的寬高不固定，就不能用負(fù)了使用百分比是相對(duì)于父元素的寬度。代碼結(jié)果實(shí)現(xiàn)代碼設(shè)置寬高以顯示居中效果彈性布局垂直居中水平居中 一：水平居中 1、行內(nèi)元素水平居中 在父元素上設(shè)置 text-align: center 使文字/圖片水平居中。 .container { text-align: center; } 2...

    AZmake 評(píng)論0 收藏0

  • CSS居中

    摘要：備份及更新說(shuō)明表示要被居中的元素，表示要居中的元素的父元素包含元素的元素。左右居中要居中的塊級(jí)元素元素設(shè)置。網(wǎng)格布局居中根據(jù)需要布局網(wǎng)格，將要居中的元素?cái)[放在網(wǎng)格中間即可。 [TOC]備份及更新 說(shuō)明 .center表示要被居中的元素，.wrap 表示要居中的元素的父元素（包含.center元素的元素）。 為了便于理解和敘述同一： 對(duì)于文本內(nèi)容居中的情況，.wrap就是指包含文...

    劉永祥 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<