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

ztyzz 發布于2019-08-30 13:21 / 2018人閱讀

摘要：大小不固定的圖片多行文字的水平垂直居中方式不固定大小的圖片是現代瀏覽器中實現圖片垂直居中比較方便的方法增加一個高度等于圖片容器的高的空標簽，設置結構多行文字不支持的版本外層不能浮動如空標簽跟上面一種方法類似，這里

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

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

html結構：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...

多行文字

不支持

外層不能浮動（如 ~~.demo {float: left}~~)

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

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

空標簽

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

html結構：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制作圖片水平垂直居中
大小不固定的圖片、多行文字的水平垂直居中

云服務器 GPU云服務器水平垂直居中固定垂直居中文字垂直居中 html使文字垂直居中

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115500.html

CSS水平或垂直居中技巧

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

CastlePeaK 2019-08-30 11:22 評論0 收藏0
vertical-align屬性與垂直居中

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

bergwhite 2019-08-28 18:11 評論0 收藏0
從一個內聯元素布局引發對line-height的探討

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

seal_de 2019-08-02 15:37 評論0 收藏0