CSS align-items 屬性

定義和用法

align-items 屬性為彈性容器內的項目指定默認對齊方式。

提示：請使用每個項目的 align-self 屬性來覆蓋這個 align-items 屬性。

另請參閱：

CSS 教程：CSS Grid

CSS 教程：CSS Flexbox

CSS 參考手冊：align-content 屬性

CSS 參考手冊：align-self 屬性

CSS 參考手冊：justify-content 屬性

CSS 參考手冊：justify-items 屬性

CSS 參考手冊：justify-self 屬性

HTML DOM 參考手冊：alignItems 屬性

實例

將彈性 <div> 元素的所有項目的居中對齊：

div {
  display: flex;
  align-items: center;
}

親自試一試

CSS 語法

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

屬性值

值 描述
stretch 默認。項目被拉伸以適合容器。
center 項目位于容器的中央。
flex-start 項目位于容器的開頭。
flex-end 項目位于容器的末端。
baseline 項目被定位到容器的基線。
initial 將此屬性設置為其默認值。參閱 initial。
inherit 從其父元素繼承此屬性。參閱 inherit。

技術細節

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

瀏覽器支持

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

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