css2與css3各類元素的居中解析

2021-09-11 10:24:40 字數 1899 閱讀 9279

先解析一下下面要講的元素的含義。

塊級元素

1.總是從新的一行開始

2.高度、寬度都是可控的

3.寬度沒有設定時,預設為100%

4.塊級元素中可以包含塊級元素和行內元素

行內元素

1.和其他元素都在一行

2.高度、寬度以及內邊距都是不可控的

3.寬高就是內容的高度,不可以改變

4.行內元素只能行內元素,不能包含塊級元素

常見的塊狀元素有:

,,...,,,,,

,,

常見的內聯元素有:

,,,,,,,,,,
css2水平居中

1.text-align:center; (是設定在父元素的)

text-align適用範圍

(1).text-align不會作用於塊級元素。

(2).text-align作用於文字。

(3).text-align作用於內聯元素。

(4).text-align作用於。

2.塊內元素

(1)margin:0 auto;

(2)可以把元素的display設定為inline-block,父級元素的text-align設定為center;

css3水平居中

使用flex布局,待處理的塊狀元素的父元素新增屬性display:flex及justify-content:center

css2垂直居中

1.單行的行內元素

父級元素的

.parent 

a

解析:如有一行20px大小的文字,如果設定為line-height:50px,那就是說,這行文字的高度會佔50px。

顯然,每個字的大小只有20px,那怎麼辦呢?於是呢,瀏覽器就把多出來的30px(50px-20px)在這行文字的上面加上了15px,下面加上了15px。

這樣的話,那文字就在這50px的空間內是居中的了(這個就是瀏覽器規定的,它就這個分配空間)。

這樣的話,如果你的div是50px,那麼巧了,正好這行文字也就相對於div居中了。

所以,這樣一來呢,就有了「把line-height設定為容器div的高度就能使文字垂直居中」。

2.多行的行內元素

.parent
vertical-align只適用於inline/table-cell元素。

3.已知高度的塊狀元素

.item
css2水平垂直居中1.已知高度

.item
2.已知高度,可以自動適應

.item
把元素充滿了容器,同時自身指定了高度,總寬度=width +margin-left+margin-right,當margin設定為auto的時候,左右邊距會平分,元素自然就居中了,和上面的line-height可以居中一樣道理。

css3水平垂直居中

1.使用flex布局,待處理的塊狀元素的父元素新增屬性

display: flex;

justify-content:center; /*水平居中×/

align-items: center; /*垂直居中*/

2.未知高度時

.item

CSS3的 fit content實現水平居中

當我們讓乙個模程式設計客棧塊水平居中首先程式設計客棧想到的肯定是margin 0 auto 有木有?那麼今天給大家介紹乙個fit c程式設計客棧ontent屬性,不知道有沒有同學用過,如果用過那麼你可以略過這篇文章,沒用過的同學就繼續了,我也是第一次看到這個屬性,之前不知道這個屬性更不用說使用了,原...

CSS 2 學習css的思路

開題不必太嚴肅,寫部落格也不像寫書,像聊天似的寫東西是最好的表達方式。記得之前看過乙個段子,也可能是一件真事兒,這不重要。大體內容如下 乙個香港的教授說 我們香港的大學和大陸的大學差的很遠啊,大陸的大學連看門保安都懂得哲學,因為當你想要進入校園時,保安都會問你乙個很哲學的問題 你是誰,你從 來,你到...

CSS與CSS3的區別

css 指的是層疊樣式表 cascading style sheets css 描述了如何在螢幕 紙張或其他 上顯示 html 元素 css 節省了大量工作。它可以同時控制多張網頁的布局 外部樣式表儲存在 css 檔案中css3 是最新的 css 標準。具體內容看後文css 選擇器盒模型 背景和邊框...