設計師學習HTML CSS之路 15

不了解前端的ui不是好美工，以下是慕課網html+css基礎教程學習筆記，不廢話，start!

15-1 水平居中設定-行內元素

設定水平居中需要分兩種情況：行內元素和塊狀元素。本節先介紹行內元素：

如果被設定元素為文字、等行內元素時，水平居中是通過給父元素設定text-align:center來實現的。

html**：

"txtcenter">我想要在父容器中水平居中顯示。

複製**

css**：

複製**

15-2 水平居中設定-定寬塊狀元素

當被設定元素為塊狀元素時，用text-align:center就不起作用了，這時也分兩種情況：定寬塊狀元素和不定寬塊狀元素。本節先了解定寬塊狀元素(塊狀元素的寬度width為固定值）:

滿足定寬和塊狀兩個條件的元素通過設定左右margin為auto來實現居中的：

html**：

我是定寬塊狀元素，我要水平居中顯示。

複製**

css**：

複製**

也可以寫成：

margin-left:auto;
margin-right:auto;
複製**

注意，元素的上下margin是可以隨意設定的。

水平居中總結-不定寬塊狀元素方法（一）

不定寬塊狀元素:塊狀元素的寬度的width不固定。

不定寬的塊狀元素有三種方法居中：

加入table標籤；

設定display:inline*,顯示型別為行內元素，進行不定寬元素屬性設定；

設定position:relative和left:50%利用相對定位的方式，將元素向左便宜50%，達到居中效果。

table標籤是利用其標籤的長度自適應的特性——即不定義其長度也不預設父元素body的長度（table其長度根據其內文字長度決定），因此可以看做乙個定寬度元素，然後在利用定寬度塊狀居中的margin的方法，使其水平居中。

舉例：html**

複製**

css**：

table

複製**

補充：不僅僅是套乙個

...

複製**結構。