[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