CSS中的align屬性用于控制元素的對齊方式,常見的屬性有以下幾種:
align-content: center; align-items: center; align-self: center; text-align: center;
align-content屬性可以用于設置多行元素的對齊方式,如果元素只有一行則無效。其可用值有:
- flex-start:默認對齊方式,元素沿主軸開始位置對齊
- flex-end:元素沿主軸結束位置對齊
- center:元素沿主軸居中對齊
- space-between:元素在主軸上均勻分布,首尾元素分別置于起點和終點
- space-around:元素在主軸上均勻分布,元素之間間距相等
.container { display: flex; align-content: center; }
align-items屬性可以用于設置單個元素在交叉軸上的對齊方式,其可用值有:
- stretch:默認對齊方式,元素會被拉伸以填滿交叉軸
- flex-start:元素沿交叉軸開始位置對齊
- flex-end:元素沿交叉軸結束位置對齊
- center:元素沿交叉軸居中對齊
- baseline:所有元素沿基線對齊
.box { align-items: center; }
align-self屬性可以用于設置單個元素在交叉軸上的自身對齊方式,其可用值與align-items相同。
.box1 { align-self: flex-start; } .box2 { align-self: flex-end; }
text-align屬性可以用于設置文本在元素內部的對齊方式,其可用值有:
- left:默認對齊方式,文本左對齊
- right:文本右對齊
- center:文本居中對齊
- justify:文本兩端對齊
.text { text-align: center; }
以上是CSS中的align屬性的一些用法,可以根據需要使用相應的屬性來控制元素的對齊方式。