行內元素和塊級元素水平及垂直居中問題

2021-09-02 02:36:30 字數 1457 閱讀 8355

首先,介紹一下行內元素和塊級元素,這個很重要,因為有的屬性只能用於塊元素,而有的正好相反,在一定的情況下,它們也可以相互轉換,比如用display來進行設定。

行內元素:

①不佔據一整行,隨內容而定,有以下特點:

②不可以設定寬高,也不可以設定行高,其寬度隨著內容增加,高度隨字型大小而改變。

③內聯元素可以設定外邊界,但是外邊界不對上下起作用,只能對左右起作用。

④也可以設定內邊界,但是內邊界在ie6中不對上下起作用,只能對左右起作用。

常用的內聯元素有:

a - 錨點,b - 粗體(不推薦),br - 換行,em - 強調,font - 字型設定(不推薦),i - 斜體,img - ,input - 輸入框,label - **標籤,select - 專案選擇,small - 小字型文字,span - 常用內聯容器,定義文字內區塊,strike - 中劃線,strong - 粗體強調

塊級元素block element:

①總是在新行上開始,佔據一整行;

②高度,行高以及外邊距和內邊距都可控制;

③寬頻始終是與瀏覽器寬度一樣,與內容無關;

④它可以容納內聯元素和其他塊元素。

常用的塊級元素有:

div -最常用的塊級元素,dl - 和dt dd搭配使用的塊級元素,form - 互動表單,h1 - 大標題,hr - 水平分隔線,ol - 排序表單,p - 段落,ul - 非排序列表

互相轉換:使用display設定可以使得行內元素擁有塊級元素的特性,反之也可以。

如:我是被設定了內聯的塊元素p,我現在的表現形式和內聯元素一樣啦

我是被設定了塊級元素的span,我現在可以獨佔一行並且可以設定寬高

display: table-cell ,能把元素當作**單元來顯示,這個非常實用,顯示效果也很好,只可惜某些瀏覽器不夠相容。要注意,和乙個合法的元素必須在裡一樣,

display: table-cell 元素必須作為 display: table 的元素的子元素出現。

css設定行內元素的水平居中

div /*div內的行內元素均會水平居中*/ 

css設定行內元素的垂直居中

div /*div內的行內元素均會垂直居中*/ 

ps:當然,如果既要水平居中又要垂直居中,那麼綜合一下

div 

css設定塊級元素的水平居中

div p /*塊級元素p一定要設定寬度,

才能相當於div父容器水平居中*/ 

css設定塊級元素的垂直居中

div /*div父容器設定寬度*/ 

div p /*塊級元素p也可以加個寬度,

以達到相對於div父容器的水平居中效果*/ 

文章**: 

行內元素和塊級元素的垂直居中,水平居中

一 行內元素 1 行內元素的水平居中 給父級元素使用屬性text align center 2 行內元素的垂直居中 給父級元素使用屬性line hight 父元素盒子的高度 二 塊級元素 1 塊級元素的水平居中 給子級元素使用屬性margin 0 auto 2 行內元素的水平垂直居中,有四種方法 h...

行內元素 塊級元素和行內塊級元素

而標籤的屬性是可以轉換的 display inline 轉換為行內元素 display linline block 轉換為行內塊元素 display block 轉換為塊級元素。行內元素 無法設定寬高 margin和padding上下無效,只有左右有效果 總是和相鄰的行內元素在同一行上,預設排列方式...

行內元素 塊級元素和行內塊元素

a 標籤定義鏈結 b 字型加粗 br 換行 i 斜體文字效果 img 在網頁中嵌入 input 輸入框 span 組合文件中的行內元素 small 呈現小號字型效果 big 呈現大號字型效果 sub 定義下標文字 sup 定義上標文字 div 定義文件中的分割槽或節 dl 定義列表 dt 定義列表中...