css讓作品居中顯示的幾種方法

2021-08-30 14:12:35 字數 1128 閱讀 5969

讓作品居中顯示

1.使用自動外邊距實現居中

css中首選的讓元素水平居中的方法就是使用margin屬性--將元素的margin-left

和margin-right屬性設定為auto即可。在實際使用中,我們可以為這些需要居中的元素

建立乙個起容器作用的div.特別注意的一點是,必須為該容器指定寬度:

div#container

2.使用text-align實現居中

另一種實現元素居中的方法是使用text-align屬性,將該屬性值設定為center

並應用到body元素上即可。這種做法是徹頭徹尾的hack,但它卻能 相容大多數瀏覽器,

所以在某些情況下也自然必不可少.

之所以說它是hack,是因為這種方法並沒有將文字屬性應用到文字上,而是應用到了

作為容器的元素上。這也就給我們帶來了額外的工作。

在建立好布局必須的div後,我們要按照如下的**為body應用text-align屬性:

body

之後會出現什麼問題麼?body的所有子孫元素都會被居中顯示.

因此,我們就需要用再寫一條規則,讓其中的文字回到預設的居左對齊:

p  可以想象這條附加的規則將帶來一些不便。另外,真正完全遵循標準的瀏覽器

並不會改變容器的位置,而只會讓其中的文字居中顯示。

3.組合使用自動外邊距和文字對齊

body

#container

可是這始終是個hack,無論如何也算不上完美。我們還是需要為居中容器中的文字

編寫附加的規則,但至少在各個瀏覽器中看起來都不錯.

4.負外邊距解決方案

負外邊距解決方案遠不是僅僅為元素新增負外邊距這麼簡單。這種方法需要同時使用

絕對定位和負外邊距兩種技巧。

下面將介紹該方案的具體實現方法。首先建立乙個包含居中元素的容器,然後將其

絕對定位於相對頁面左邊緣50%的位置。這樣,該容器的左外邊距將從頁面50%寬度

的寬度的位置開始算起。

然後將容器的左外邊距值設定為負的容器寬度的一半。這樣即可將該容器固定在頁面

水平方向的中點。

#container

看,沒有任何hack!雖然不是首選的解決方案,但也是個不錯的方法,且適用性極廣。

CSS水平居中的幾種方法

如果被設定元素為文字 等行內元素時,水平居中可以通過父元素設定text align center來實現。html style text align center 我是文字,哈哈,我想要在父容器中水平居中顯示。div body 當被設定元素為塊狀元素時用 text align center 就不起作用...

css垂直居中的幾種方法

1.lineheight方法 html class container id div1 src test.png 一行文字span div css container div1 div1 img效果 說明 設定了lineheight和容器高度相同,vertical align middle 需要知道...

CSS垂直居中的幾種方法

對於乙個前端開發人員,元素居中在布局中相當常見,水平居中實現非常非常容易,如果是行內元素,設定text align center就行,如果是塊級元素,通過設定邊距margin auto可實現水平居中。垂直居中實現起來相對較為較為麻煩,不囉嗦,直接上乾貨。主要有下面幾種方法 1 絕對定位方法 id m...