[Back To Basic] CSS align

置中元素

• 語法: margin: auto;
• 設定寬度，可以避免元素延伸到容器的邊界
• 如果沒設定寬度或設定為100%，都不會有置中效果

置中文字

• 語法: text-align: center;

置中圖片

• 語法: display: block; margin: auto;

置左&置右(絕對位置)

• 語法:

position: absolute;

right: 0; /* 靠右對齊 */

• 設定絕對位置，跳脫出正常排版，可以和其他元素交疊(overlap)

置左&置右(float)

• 語法: float: right;
• 如果元素本身高度超出元素的容器，會有溢出的情況，可用clearfix處理

垂直置中(padding)

• 語法: padding: 8px; /* 任意設定 */

垂直置中(line-height)

• 語法:

/* 兩個設定一樣 */

height: 100px;

line-height: 100px;

垂直置中(position & transform)

• 語法:
• 容器

height: 200px; /* 任意指定 */

position: relative;

• 容器內元素

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

source code

[Back To Basic] CSS inline-block

display: inline-block

inline-block 和 inline 差別: 

• inline-block 可以設定寬度和高度
• inline-block 上下的 margin 和 padding 是被重視的

inline-block 和 block 差別:

• inline-block 不會換行

source code

[Back To Basic] CSS float and clear

float

用於定位、格式化內容

• left: 在同一個容器中，漂浮在容器左側
• right: 在同一個容器中，漂浮在容器右側
• none(預設值): 不浮動(顯示在原本出現的位置)

clear

• none: 允許浮動在左右兩側
• left: 不允許浮動在左側
• right: 不允許浮動在右側
• right: 不允許浮動在左右側

clearfix 密技

若浮動的元素超出容器，浮動的元素會溢出容器。

解法: 給定容器: overflow: auto

.clearfix {

    overflow: auto;

}

更安全的作法:

.clearfix::after {

  content: "";

  clear: both;

  display: table;

}

source code