想為塊狀元素
中的文字、設定居中樣式嗎？可以使用text-align樣式**，如下**可實現文字居中顯示。(那麼什麼是塊狀元素呢？在後面的11-1、11-2小節中會講到。)
h1同樣可以設定居左：
h1還可以設定居右：
h1在講解css布局之前，我們需要提前知道一些知識，在css中，html中的標籤元素大體被分為三種不同的型別：塊狀元素、內聯元素(又叫行內元素)和內聯塊狀元素。
常用的塊狀元素有：
、、...、、
css**：
除了上一節講到的插入table標籤，可以使
不定寬塊狀元素
水平居中之外，本節介紹第2種實現這種效果的方法，改變元素的display型別為
行內元素
，利用其屬性直接設定。
第二種方法：改變塊級元素的 display 為 inline 型別（設定為 行內元素
顯示），然後使用text-align:center來實現居中效果。如下例子：
html**：
css**：
這種方法相比第一種方法的優勢是不用增加
無語義標籤
，但也存在著一些問題：它將塊狀元素的 display 型別改為 inline，變成了
行內元素
，所以少了一些功能，比如設定長度值。
除了前兩節講到的插入table標籤，以及改變元素的
display
型別，可以使不定寬塊狀元素水平居中之外，本節介紹第3種實現這種效果的方法，設定浮動和相對定位來實現。
方法三：通過給父元素設定
float
，然後給父元素設定
position:relative
和left:50%，子元素設定position:relative 和left:
-50%
來實現水平居中。
我們可以這樣理解：假想ul層的父層（即下面例子中的div層）中間有條平分線將ul層的父層（div層）平均分為兩份，ul層的css**是將ul層的最左端與ul層的父層（div層）的平分線對齊；而li層的css**則是將li層的平分線與ul層的最左端（也是div層的平分線）對齊，從而實現li層的居中。
**如下：
css**：
這三種方法使用得都非常廣泛，各有優缺點，具體選用哪種方法，可以視具體情況而定。
我們在實際工作中也會遇到需要設定垂直居中的場景，比如好多報紙的文章標題在左右一側時，常常會設定為垂直居中，為了使用者體驗性好。
這裡我們又得分兩種情況：父元素高度確定的單行文字，以及父元素高度確定的多行文字。
本節我們先來看第一種父元素高度確定的單行文字, 怎麼設定它為垂直居中呢？
父元素高度確定的單行文字
的豎直居中的方法是通過設定父元素的 height 和line-height
高度一致來實現的。(height: 該元素的高度，line-height: 顧名思義，行高（行間距），指在文字中，行與行之間的 基線間的距離 )。
line-height
與 font-size
的計算值之差，在css 中成為「
行間距」。分為兩半，分別加到乙個文字行內容的頂部和底部。
這種文字行高與塊高一致帶來了乙個弊端：當文字內容的長度大於塊的寬時，就有內容脫離了塊。
如下**：
hi,imooc!
css**：
父元素高度確定的
多行文字、等
的豎直居中的方法有兩種：
方法一：使用插入
table
(包括tbody、tr、td)標籤，同時設定
vertical-align：middle
。css 中有乙個用於豎直居中的屬性
vertical-align
，在父元素設定此樣式時，會對
inline-block
型別的子元素都有用
。下面看一下例子：
html**：
看我是否可以居中。
css**：
table td
因為td 標籤預設情況下就
預設設定了vertical-align 為middle
，所以我們不需要顯式地設定了。
除了上一節講到的插入
table標籤
，可以使
父元素高度確定的多行文字
在chrome、firefox 及ie8 以上的瀏覽器下可以設定塊級元素的display 為
table-cell
（設定為**單元顯示）
，啟用vertical-align 屬性，但注意
ie6、7
並不支援這個樣式,
相容性比較差
。html**：
看我是否可以居中。
看我是否可以居中。
看我是否可以居中。
css**：
這種方法的好處是不用新增多餘的
無意義的標籤
，但缺點也很明顯，它的相容性不是很好，不相容ie6、7而且
這樣修改
display的block
變成了table-cell
，破壞了原有的塊狀元素的性質
。有乙個有趣的現象就是當為
元素（不論之前是什麼型別元素，display:none 除外）
設定以下2 個句之一：
1. position : absolute
2. float : left 或 float:right
簡單來說，只要html**中出現以上兩句之一，元素的display顯示型別就會自動變為以
display:inline-block（塊狀
元素）的方式顯示，當然就可以設定元素的width 和height 了，且預設寬度不佔滿父元素。
如下面的**，小夥伴們都知道a 標籤是
行內元素
，所以設定它的width 是 沒有效果的，但是設定為
position:absolute
以後，就可以了。
進入課程請單擊這裡
css**
html css基礎知識點筆記
簡單回憶了一下html css基礎 網頁標題 定義編碼格式，如 utf 8，gb2312，gbk eg 用於匯入css樣式檔案 常用標籤 2 嵌入樣式 3 匯入樣式 型別 字型型別 font family 字型渲染 text shadow 字型大小 font size 字型風格 font style...
HTML CSS基礎知識點（1）
html 超文字標記語言 web標準提出最佳體驗方案 結構 樣式 行為分離 form表單域 action url位址 指定接收處理資料伺服器位址 method get post 用於設定表單資料提交方式 name 表單名稱 用於指定表單名稱，以區分多個表單 input基本屬性有 type,name,...
HTML CSS基礎知識點複習之三
form 標籤是表單標籤,常用的方法有如下兩個方法 1 表單項沒有 name 屬性值 下拉列表的name寫在select上面 2 單選 複選 下拉列表中的 option 標籤 都需要新增 value 屬性，以便傳送給伺服器 3 表單項不在提交的 form 標籤中 get 請求的特點是 1 瀏覽器位址...