国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

如何讓元素水平垂直居中

Jason / 2458人閱讀

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

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

table-cell方法
需要有兩個容器包住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頁面效果：

IE6/IE7頁面效果：

IE6/7代碼兼容：

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

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

已知要居中元素的寬高，可以通過定位的方法來實現(xiàn)垂直水平居中
比如說要將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)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/111952.html

相關(guān)文章

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

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

    Hydrogen 評論0 收藏0

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

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

    hlcc 評論0 收藏0

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

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

    Meils 評論0 收藏0

  • css 元素居中

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

    AZmake 評論0 收藏0

  • CSS居中

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

    劉永祥 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<