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

資訊專欄INFORMATION COLUMN

使用 Flexbox 使浮動元素垂直居中

LiangJ / 2291人閱讀

摘要：你需要這兩列能夠垂直居中。這意味著浮動元素總會被固定在頂部。關于的瀏覽器兼容性可以在查看得到使用使浮動元素垂直居中

垂直居中一直是一個很麻煩的問題，但基于 FlexBox 的垂直居中就非常簡單了。

考慮下面的場景：

你正在使用網格布局的框架，比如 Bootstrap、Foundation、 Skeleton、Susy 等。

你有兩個包含動態內容的列（每列都是一個盒模型），你并不知道每列的具體尺寸，也不知道哪個更高。

你需要這兩列能夠垂直居中。

我們希望得到的布局就像下面這樣：

但默認情況下，這兩列將會頂部對齊：

所以問題來了，在不改變浮動布局的前提下，我們應該如何是元素垂直居中對齊？到目前為止，這個簡單的問題都非常難以解決。

是否可以使用 vertical-align:middle

很不幸，不能，因為一些不同的原因。

首先，在 MDN->CSS 中有關于 vertical-align 的描述 The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box.。我們的元素不是 inline、inline-block 或 table-cells，所以在不改變 display 的情況下 vertical-align:middle 并不會生效。

其次，網格布局的框架使用了 float:right 來對我們的兩列元素進行定位，在 W3C->CSS->9.5.1 Positioning the float: the "float" property 第八條有描述 A floating box must be placed as high as possible.。這意味著浮動元素總會被固定在頂部。

第一個問題我們可以通過將 display 改為 inline-block 或者 table-cell 解決，但沒有 CSS 技術可以解決第二個問題。我們需要移除浮動規則，但這會破壞基于網格布局的框架的基礎。

使用 Flexbox 解決問題

像往常一樣，Flexbox 對我們的問題有一個簡單的解決方案。只需要簡單的兩步就行了：

為元素添加 display: flex 規則。

為對元素添加 ‘align-items: center 規則。

這樣就可以了！下面是一個簡單的 HTML 和 CSS 例子：


 
[Dynamic content]

 
[Dynamic content]


.container {
  display: flex;
  align-items: center;
}

.column-1,
.column-2 {
  float: left;
  width: 50%;
}

See the Pen RZWYZX by Hang Jiang (@nodejh) on CodePen.


這種解決方法最好的一點是通過添加兩個規則，在沒有對兩列元素的原本樣式做任何修改的前提下就實現了垂直居中對齊。現在大部分瀏覽器都支持 flex，老的瀏覽器會忽略該規則，元素將保持頂部對齊。

關于 flexbox 的瀏覽器兼容性可以在 Can I Use Flexbox 查看得到：

使用 Flexbox 使浮動元素垂直居中

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

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

相關文章

  • CSS 布局經典問題初步整理

    摘要：布局經典問題初步整理標簽前端本文主要對布局中常見的經典問題進行簡單說明，并提供相關解決方案的參考鏈接，涉及到三欄式布局，負，清除浮動，居中布局，響應式設計，布局，等等。 CSS 布局經典問題初步整理 標簽 ： 前端 [TOC] 本文主要對 CSS 布局中常見的經典問題進行簡單說明，并提供相關解決方案的參考鏈接，涉及到三欄式布局，負 margin，清除浮動，居中布局，響應式設計，Fl...

    Amos 評論0 收藏0

  • 前端-CSS3&H5

    摘要：高度模型淺識為的簡寫，簡稱為塊級格式化上下文，為瀏覽器渲染某一區域的機制，中只有和中還增加了和。并非所有的布局都會在開發中使用，但是其中也會涉及一些知識點。然而在不同的純制作各種圖形純制作各種圖形多圖預警 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 float 屬性不...

    xiaolinbang 評論0 收藏0

  • 朝花夕拾：CSS居中完全指南

    摘要：正文居中是常被開發者抱怨的問題之一。注意你不能將浮動元素居中。水平且垂直居中你可以將前面的方法任意組合起來，實現完美的居中效果。這樣就可以使元素水平且垂直居中，并具有良好的瀏覽器兼容性。 參考 Centering in CSS: A Complete Guide BY CHRIS COYIER ON SEPTEMBER 2, 2014 附：文中涉及到了flex的一些用法，如果沒有接...

    laznrbfe 評論0 收藏0

  • 如何居中一個元素（終結版）

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

    Hydrogen 評論0 收藏0

發表評論

0條評論

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