亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

[note]大小不固定的圖片、多行文字的水平垂直居中

ztyzz / 2073人閱讀

摘要：大小不固定的圖片多行文字的水平垂直居中方式不固定大小的圖片是現(xiàn)代瀏覽器中實(shí)現(xiàn)圖片垂直居中比較方便的方法增加一個(gè)高度等于圖片容器的高的空標(biāo)簽，設(shè)置結(jié)構(gòu)多行文字不支持的版本外層不能浮動(dòng)如空標(biāo)簽跟上面一種方法類似，這里

大小不固定的圖片、多行文字的水平垂直居中 display:table-cell+display:inline方式 不固定大小的圖片

display:table,vertical-align:middle是現(xiàn)代瀏覽器中實(shí)現(xiàn)圖片垂直居中比較方便的方法
IE6-7 hack：增加一個(gè)高度等于圖片容器的高的空標(biāo)簽height: 100%，設(shè)置vertical-align: middle

html結(jié)構(gòu)：ul>li>a>img+span

.img-list {
  a {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
  }
}
// if lt IE 8
.img-list {
  _height: 0;
  *zoom: 1;
  a {
    display: block;
  }
  span {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
  }
}

http://codepen.io/zplus/pen/z...

多行文字

不支持

外層不能浮動(dòng)（如 .demo {float: left})

.demo {
  display: table-cell;
  vertical-align: middle;
}
span {
  display: inline-block;
}

http://codepen.io/zplus/pen/w...

空標(biāo)簽

跟上面一種方法類似，這里直接使用空標(biāo)簽設(shè)置display: inline-block; vertical-align: middle; height: 100%來觸發(fā)垂直居中

html結(jié)構(gòu)：ul>li>a>img+span

.img-list {
  a {
    font-size: 0;
  }
  img {
    vertical-align: middle;
  }
  span {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    width: 1;
  }
}

http://codepen.io/zplus/pen/e...

參考鏈接

CSS制作圖片水平垂直居中
大小不固定的圖片、多行文字的水平垂直居中

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/115500.html

相關(guān)文章

  • CSS水平或垂直居中技巧

    摘要：適用情景單對象水平居中原理將子元素設(shè)置塊級(jí)表格，再設(shè)置水平居中。結(jié)語有些是水平居中，有些是垂直居中，將它們某兩個(gè)合在一起就能實(shí)現(xiàn)水平和垂直均居中。 前言 css水平和垂直居中是一個(gè)亙古不變的話題，它常常出現(xiàn)在優(yōu)美的網(wǎng)頁上以及各大前端面試當(dāng)中。說來慚愧，在兩年前面試的時(shí)候，我完全不知道如何做到水平和垂直均居中的方法，那場面別提有多尷尬了（ps：特想找個(gè)地洞鉆進(jìn)去）。。。時(shí)隔兩年，對于這個(gè)...

    CastlePeaK 評論0 收藏0

  • vertical-align屬性與垂直居中

    摘要：方法二利用，設(shè)置元素結(jié)構(gòu)，并應(yīng)用實(shí)現(xiàn)垂直居中，這種方法的實(shí)現(xiàn)可用于多行文本，要求及以上版本。 讓元素居中對齊是非常常見的需求，首先是水平居中，要實(shí)現(xiàn)水平居中行內(nèi)元素只需要在其父元素上設(shè)置text-align: center即可，對于塊級(jí)元素來說讓它的margin-left: auto和margin-right: auto即可（width不可為auto），那么垂直居中呢？找下css屬性發(fā)...

    bergwhite 評論0 收藏0

  • 從一個(gè)內(nèi)聯(lián)元素布局引發(fā)對line-height的探討

    摘要：從一個(gè)內(nèi)聯(lián)元素布局引發(fā)對的探討一前言這個(gè)屬性對于各位前端的小伙伴來說并不陌生。對于塊級(jí)元素，它指定元素行盒的最小高度。對于非替代的元素，它用于計(jì)算行盒的高度。如存在屬性的六總結(jié)以上就是本人對行內(nèi)布局以及的一些思考總結(jié)。 從一個(gè)內(nèi)聯(lián)元素布局引發(fā)對line-height的探討 一、前言 line-height這個(gè)屬性對于各位前端的小伙伴來說并不陌生。在之前寫頁面的時(shí)候碰到過一個(gè)該屬性相關(guān)的...

    seal_de 評論0 收藏0

發(fā)表評論

0條評論

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