CSS align-self 屬性

定義和用法

align-self 屬性指定彈性容器內所選項目的對齊方式。

注意：align-self 屬性將覆蓋彈性容器的 align-items 屬性。

另請參閱：

CSS 教程：CSS Grid

CSS 教程：CSS Flexbox

CSS 參考手冊：align-content 屬性

CSS 參考手冊：align-items 屬性

CSS 參考手冊：justify-self 屬性

HTML DOM 參考手冊：alignSelf 屬性

實例

把彈性元素內的項目之一居中對齊：

#myBlueDiv {
  align-self: center;
}

親自試一試

CSS 語法

align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;

屬性值

值 描述
auto 默認。元素繼承其父容器的 align-items 屬性，如果沒有父容器，則為 "stretch"。
stretch 元素被拉伸以適應容器。
center 元素位于容器的中央。
flex-start 元素位于容器的開頭。
flex-end 元素位于容器的末端。
baseline 元素被定位到容器的基線。
initial 將此屬性設置為其默認值。參閱 initial。
inherit 從其父元素繼承此屬性。參閱 inherit。

技術細節

默認值： auto
繼承： 否
動畫制作： 不支持。請參閱：動畫相關屬性。
版本： CSS3
JavaScript 語法： object.style.alignSelf="center"

瀏覽器支持

表格中的數字注明了完全支持該屬性的首個瀏覽器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
57.0 16.0 52.0 10.1 44.0