CSS 居中完全指南

hqman 發(fā)布于2019-08-30 13:03 / 1624人閱讀

摘要：在文本前面插入一個高度為百分百的偽元素，讓文本與其垂直對齊。塊級元素或者使用垂直水平居中或者使用

翻譯自 https://css-tricks.com/centering-css-complete-guide/

預(yù)先給出這樣的樣式

水平居中 子元素為 inline 或者 inline-* 元素（例如 text 或者 links)

使用 text-align: center; 的方法

子元素為 block 元素

使用 margin: 0 auto; 的方法

有多個 block 元素

如果你有兩個或更多的 block-level 元素需要在一行內(nèi)居中

方法一：
改變 display 的類型為 inline-block

方法二：
使用 flexbox

垂直居中 子元素為 inline 或者 inline-* 元素（例如 text 或者 links) 只有一行文本

一個小技巧是將 height 與 line-height 設(shè)置為相同的值


  center

有多行文本

可以嘗試將父元素的 display 設(shè)置為 table ，同時設(shè)置該元素的 display 為 table-cell，然后設(shè)置vertical-align: middle


  I"m vertically centered multiple lines of text in a CSS-created table layout.

或者實際的將其放入 table 中


  
    
      I"m vertically centered multiple lines of text in a real table cell.

或者使用 flexbox


  I"m vertically centered multiple lines of text in a flexbox container.

如果上面的方法都不起作用的話，可以使用一個幽靈元素。在文本前面插入一個高度為百分百的偽元素，讓文本與其垂直對齊。


  I"m vertically centered multiple lines of text in a flexbox container.

塊級元素

或者使用 flexbox

垂直 & 水平居中

或者使用 flexbox

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

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

相關(guān)文章

CSS居中完全指南——構(gòu)建CSS居中決策樹

摘要：但是部分瀏覽器存在兼容性的問題。核心代碼寬高不固定水平垂直居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示 CSS居中完全指南——構(gòu)建CSS居中決策樹 showImg(https://segmentfault.com/img/bV8tDq); 本文總結(jié)CSS居中,包括水平居中和垂直居中.本文相當(dāng)于CSS決策樹,下次再遇到...

cc17 2019-08-02 10:11 評論0 收藏0
CSS居中完全指南——構(gòu)建CSS居中決策樹

摘要：但是部分瀏覽器存在兼容性的問題。核心代碼寬高不固定水平垂直居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示 CSS居中完全指南——構(gòu)建CSS居中決策樹 showImg(https://segmentfault.com/img/bV8tDq); 本文總結(jié)CSS居中,包括水平居中和垂直居中.本文相當(dāng)于CSS決策樹,下次再遇到...

AlienZHOU 2019-08-30 15:53 評論0 收藏0
CSS居中完全指南

摘要：原載于，本文著重提取文中的方法，不完全翻譯。人們經(jīng)常抱怨在中居中元素的問題，其實這個問題其實并不復(fù)雜，只是因為方法眾多，需要根據(jù)情況從眾多方法中選取一個出來。原載于CSS-Trick，本文著重提取文中的方法，不完全翻譯。如有需要，直接原文查看。人們經(jīng)常抱怨在CSS中居中元素的問題，其實這個問題其實并不復(fù)雜，只是因為方法眾多，需要根據(jù)情況從眾多方法中選取一個出來。接下來，我們做一個‘...

qujian 2019-08-30 12:47 評論0 收藏0
朝花夕拾：CSS居中完全指南

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

laznrbfe 2019-08-29 13:45 評論0 收藏0
居中的css:完全指南(翻譯)

摘要：水平水平居中有行內(nèi)元素和塊元素，行內(nèi)元素有文字圖片鏈接等塊元素主要是等元素。塊元素對于一個塊元素，可以設(shè)置其和自動，就像這樣在線查看無論塊元素的寬度是否已知，都可以實現(xiàn)水平居中。這里主要參考的是CHRIS COYIER寫的一篇的文章(點擊查看)，主要講了關(guān)于css水平、垂直居中的一些方法,每個方法后面都有一個demo，可以在線查看效果。 1 水平水平居中有行內(nèi)元素和塊元素，行內(nèi)元素...

Integ 2019-08-30 12:54 評論0 收藏0