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

資訊專欄INFORMATION COLUMN

[譯]關(guān)于垂直居中 Vertical Align 的探討

lscho / 2442人閱讀

摘要：為子元素設(shè)置屬性和，令子元素的頂部在縱向上與父元素中間的位置對(duì)齊。為子元素設(shè)置屬性，其中為子元素高度值的一半，相當(dāng)于再將子元素向上移動(dòng)其本身高度的一半距離，這樣就可以令其垂直居中了。

原文出處：Understanding vertical-align, or "How (Not) To Vertically Center Content"

“如何垂直居中某個(gè)元素”，以及“vertical-align: middle; 為什么不起作用”，是兩個(gè)很常見的問題，究其原因，要分為下面三點(diǎn)來(lái)講述：

HTML 的布局本是為水平方向的排版來(lái)設(shè)計(jì)的，內(nèi)容都是根據(jù)指定的寬度以及該寬度下所對(duì)應(yīng)的高度（設(shè)置了高寬比）來(lái)顯示的。所以，水平方向上的尺寸調(diào)整和布局輕而易舉，而垂直方向上的則要以水平方向?yàn)闇?zhǔn)。

vertical-align: middle; 之所以不起作用，是因?yàn)槭褂谜卟]有真正理解它，但是……

使用者之所以沒有理解這個(gè)屬性，是因?yàn)?CSS 定義就把這事兒弄砸了——在不同的應(yīng)用環(huán)境中，它會(huì)表現(xiàn)出兩種不同的結(jié)果。

應(yīng)用于表格單元格的 vertical-align

這個(gè)屬性應(yīng)用于表格單元格時(shí)，通常都能得到我們想要的結(jié)果，該屬性模擬的是已經(jīng)棄用的舊屬性 valign。在支持新標(biāo)準(zhǔn)的現(xiàn)代瀏覽器中，下面三行語(yǔ)句實(shí)現(xiàn)的效果是一樣的：

  
 ... 

 ...
應(yīng)用于行內(nèi)元素的 vertical-align

當(dāng)這個(gè)屬性應(yīng)用于行內(nèi)元素時(shí)，它的表現(xiàn)形式與已經(jīng)棄用的、應(yīng)用于 元素的舊屬性 align 相同。在支持新標(biāo)準(zhǔn)的現(xiàn)代瀏覽器中，下面三行語(yǔ)句實(shí)現(xiàn)的效果是一樣的：



 foo
bar
應(yīng)用于其它元素的 vertical-align

從技術(shù)上來(lái)講，其它元素沒有該屬性。當(dāng)新手給普通的塊狀元素（比如

）分配該屬性時(shí)，大部分瀏覽器會(huì)給這個(gè)塊狀元素的所有行內(nèi)子元素設(shè)置該屬性的值為 inherit。

如何使元素垂直居中？ 方法一

要實(shí)現(xiàn)垂直居中，需要滿足兩個(gè)前提條件：

要設(shè)置垂直居中元素的高度，并且為其再添加一個(gè)父級(jí)塊元素（也需設(shè)置高度，這點(diǎn)原文未作說明）。

對(duì)內(nèi)容塊設(shè)置絕對(duì)定位不會(huì)出現(xiàn)問題。（一般來(lái)說都沒什么問題，因?yàn)楦讣?jí)的塊元素還是處在正常的文檔流中的。）

如果能夠滿足以上兩點(diǎn)，那么可以通過以下幾步設(shè)置來(lái)實(shí)現(xiàn)元素的垂直居中：

設(shè)置父容器的屬性為 position: relative or position: absolute。

為垂直居中的子元素設(shè)置一個(gè)固定的寬度。

為子元素設(shè)置屬性 position:absolute 和 top:50%，令子元素的頂部在縱向上與父元素中間的位置對(duì)齊。

為子元素設(shè)置屬性 margin-top:-yy，其中 yy 為子元素高度值的一半，相當(dāng)于再將子元素向上移動(dòng)其本身高度的一半距離，這樣就可以令其垂直居中了。

下面是示例代碼：


...


  

    
Hey look! I"m vertically centered!

    
How sweet is this?!
方法二

這個(gè)方法也需要滿足兩個(gè)前提條件：

要被居中的文本只有一行。

可以為（文本所屬的）父元素（如

）設(shè)置定寬。

滿足上面的前提條件之后，只需再加一步即可實(shí)現(xiàn)垂直居中：

為父元素設(shè)置合理的寬度。

下面是示例代碼：


...


  Hey, this is vertically centered. Yay!

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

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

相關(guān)文章

  • [譯]CSS 居中（Center）方法大合集

    摘要：并排顯示，要求相同高度如果要求多個(gè)塊級(jí)元素并排居中且高度相同，則要為其父元素設(shè)置屬性。成一列顯示如果只是需要讓多個(gè)塊級(jí)元素整體水平居中，并且按默認(rèn)的方式縱向排列，那直接設(shè)置左右邊距為即可。 原文出處：Centering in CSS: A Complete Guide 本文只給出了不同條件下的實(shí)現(xiàn)方式，未對(duì)原理做探討。PS：原來(lái)要顯示 jsfiddle 和 CodePen 之類網(wǎng)站的代...

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

  • vertical-align 簡(jiǎn)明指南

    摘要：部分樣式代碼總結(jié)因?yàn)橛玫牟欢嗥渌麑?duì)齊方式并沒有舉例。 起因 內(nèi)容垂直居中在前端布局中, 是經(jīng)常遇到的需求。雖然可以用 浮動(dòng) float、position:absolute、 來(lái)解決, 不過文檔流都會(huì)受到影響。筆者常用的是 flex, 用起來(lái)順手, 有些地方用起來(lái)感覺小題大做, 于是就來(lái)探究一下 vertical-align 如何做到居中布局。 初探 要明白 vertical-align...

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

  • vertical-align 簡(jiǎn)明指南

    摘要：部分樣式代碼總結(jié)因?yàn)橛玫牟欢嗥渌麑?duì)齊方式并沒有舉例。 起因 內(nèi)容垂直居中在前端布局中, 是經(jīng)常遇到的需求。雖然可以用 浮動(dòng) float、position:absolute、 來(lái)解決, 不過文檔流都會(huì)受到影響。筆者常用的是 flex, 用起來(lái)順手, 有些地方用起來(lái)感覺小題大做, 于是就來(lái)探究一下 vertical-align 如何做到居中布局。 初探 要明白 vertical-align...

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

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

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

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

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

0條評(píng)論

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