CSS里的各種水平垂直居中基礎寫法心得總結

2024-07-11 08:50:08

字體：大中小

來源：轉載

供稿：網友

http://www.survivalescaperooms.com/w3school/htmldom/prop_style_verticalalign.htm（W3C標準，概念不清的看手冊很重要哦）
--------------------------------------------------------------------------------
首先，依舊是概念。介紹一下行內元素和塊級元素，這個很重要，因為有的屬性只能用于塊元素，而有的正好相反，在一定的情況下，它們也可以相互轉換，比如用display來進行設置。
行內元素（又叫內聯元素inline element）:
①不占據一整行，隨內容而定，有以下特點：
②不可以設置寬高，也不可以設置行高，其寬度隨著內容增加，高度隨字體大小而改變。
③內聯元素可以設置外邊界，但是外邊界不對上下起作用，只能對左右起作用。
④也可以設置內邊界，但是內邊界在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 ，能把元素當作表格單元來顯示，這個非常實用，顯示效果也很好，只可惜某些瀏覽器不夠兼容。要注意，和一個合法的<td>元素必須在<table>里一樣，
display: table-cell 元素必須作為 display: table 的元素的子元素出現。
--------------------------------------------------------------------------------
現在開始說一下簡單的幾種基礎的居中方式：
1.塊中文字水平居中：text-align 用于塊級元素，作用在使用它的塊元素中的文字或者圖片上。使得它們在水平方向上居中。
這個屬性只能作用于塊元素（或者被CSS控制為塊元素的內聯元素，但是被控制為內聯元素的塊元素是不行的）。一句話來說，就是要擁有塊元素的特點的那些元素。這個很好理解，居中，肯定是行居中，如果使用它的元素本身不擁有完整的在寬度上的獨立空間，它當然沒有能力讓它內部的文字或者圖片居中。（難道要占用別人的地盤里居中，豈不混亂啦）
例子：
我是正常p,我設置了居中
我其實是一個行內元素span哦，我設置了居中，可以居中并且獨占一行
能不能再同一行,我是被inline了的p，我設置了居中可是不能居中！
父元素的這個屬性對它下面的子元素也起作用，比如一個div設置了text-align居中，則它內部的文字可以居中，它的子div內部的文字也可以居中。但是子元素中文字的居中，是在子div中居中，而不是對于父div居中。也就是，它里面所有的文字，都會相對于最靠近自己的一層div來實現居中。所以，這個屬性不能用于div在父div中的整體居中。（不僅僅是div，所有的表現為塊元素的元素）。
下面的這段代碼，外面一個大的藍色的div，里面一個小的紅色的div。外部的div設置了水平居中，按說里面的圖片肯定會居中（運行時確實顯示居中），
而內部的div只設置了vertical-align，垂直居中（先不管它）。可是因為它父層的text-align對它也有影響，所以運行時，里面的文字會相對于內部div而居中（注意！不是相對于最外面的div)

復制代碼

上一篇：給DIV添加滾動條的實現代碼

下一篇：CSS中讓DIV居中的代碼