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

資訊專欄INFORMATION COLUMN

實踐中的垂直居中

joy968 / 1116人閱讀

摘要：背景在項目中經常碰到讓元素垂直居中的情形，實現的方法有很多，各有利弊。今天就利用下業余時間，匯總一下常用的幾種垂直居中的方式。

背景：在項目中經常碰到讓元素垂直居中的情形，實現的方法有很多，各有利弊。眾所周知的，用flex布局很容易就實現，but，一些不是很主流的瀏覽器并不支持flex，這就比較尷尬了，有好東西不能在項目中用起來。今天就利用下業余時間，匯總一下常用的幾種垂直居中的方式。
廢話少說，開整。

如圖，如果想讓盒子A在盒子B內垂直居中




  
A

flex方式，兼容到ie10

.box {
    display: -webkit-flex;  /* 新版本語法: chrome 21+ */
    display: flex;          /* 新版本語法: opera 12.1, firefox 22+ */         /*flex-direction: row; // 默認水平排列 */
    align-items: center; /* 元素排列的垂直方向居中 */
}

利用ifc(行內格式化上下文)，其實就是利用行高撐高父元素，視覺上表現也為垂直居中。

.box {
  line-height: 100px;
 }
.item {
  display: inline;
}

絕對相對定位

.box {
  position: relative;
}
.item {
  position: absolute;
  top: 50%;
  margin-top: -10px; // 自身高度的一半，此用法需要知道自身的高度
  // transform: translateY(-50%); // 兼容性允許的話可以用css3特性代替margin-top
}
// 絕對定位另一種方式
.item {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  // left: 0; right: 0; // 這樣還能水平居中
}

利用vertical-align,為了不產生新的dom，可能使用偽類before做輔助，讓子元素與偽類垂直居中對齊

.box:before {
  content: "";
  height: 100%;
  vertical-align: middle;
  display: inline-block;
}
.item {
  display: inline-block;
}

突然發現，實現垂直居中的方法有很多，此處先列舉幾個作參考，如有紕誤，歡迎評論指正。如遇到具體情況不知道怎么實現的同學，也可以私信我，日后也繼續完善此貼。

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

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

相關文章

  • 實踐中的垂直居中

    摘要：背景在項目中經常碰到讓元素垂直居中的情形，實現的方法有很多，各有利弊。今天就利用下業余時間，匯總一下常用的幾種垂直居中的方式。 背景：在項目中經常碰到讓元素垂直居中的情形，實現的方法有很多，各有利弊。眾所周知的，用flex布局很容易就實現，but，一些不是很主流的瀏覽器并不支持flex，這就比較尷尬了，有好東西不能在項目中用起來。今天就利用下業余時間，匯總一下常用的幾種垂直居中的方式。...

    dongfangyiyu 評論0 收藏0

  • css居中最佳實踐

    摘要：居中是非常常見的問題，也是面試熱門，現在對居中問題做個總結水平居中萬能的居中給父元素添加子元素都會居中，無論是還是缺點屬性會繼承會影響后代元素配合缺點以下不兼容，不過低版本微軟自家都不支持了垂直居中單行居中與相等即可達到居中配 css居中是非常常見的問題，也是面試熱門，現在對居中問題做個總結 水平居中 萬能的text-align居中 給父元素添加text-align:　center,子...

    BlackFlagBin 評論0 收藏0

  • 《CSS世界》筆記三：內聯元素與對齊

    摘要：上一篇世界筆記二盒模型四大家族下一篇世界筆記四流的保護與破壞寫在前面在頁面布局中，內聯元素的垂直對齊是比較常見和基礎的布局需求，但是我們往往會因為垂直對齊中的，而頭疼不已。 上一篇：《CSS世界》筆記二：盒模型四大家族下一篇：《CSS世界》筆記四：流的保護與破壞 寫在前面 在頁面布局中，內聯元素的垂直對齊是比較常見和基礎的布局需求，但是我們往往會因為垂直對齊中的1px，2px而頭疼不已...

    HtmlCssJs 評論0 收藏0

  • 一篇文章了解移動端文本垂直居中

    摘要：經常我們在瀏覽器上調試的好好的，但是到了移動端就會有各種奇特的適配問題最經常遇見莫過于中文字稍微偏上了。為什么中文本偏上文本都會有一個內容區域，這個區域就是我們選中文本時展示的區域。 在日常工作中，經常會遇到圖片+文字+背景色的設計稿實現。經常我們在Chrome瀏覽器上調試的好好的，但是到了移動端就會有各種奇特的適配問題——最經常遇見莫過于Android中文字稍微偏上了。在iOS和An...

    sutaking 評論0 收藏0

發表評論

0條評論

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