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

資訊專欄INFORMATION COLUMN

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

ztyzz / 2034人閱讀

摘要：大小不固定的圖片多行文字的水平垂直居中方式不固定大小的圖片是現(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%來(lái)觸發(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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

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

相關(guān)文章

  • CSS水平或垂直居中技巧

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

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

  • vertical-align屬性與垂直居中

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

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

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

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

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

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

0條評(píng)論

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