CSS align-self 属性

CSS 属性 align-self 会对齐当前 grid 或 flex 行中的元素,并覆盖已有的 align-items 的值。In Grid, it aligns the item inside the grid area. 在 Flexbox 中,会按照 cross axis(当前 flex 元素排列方向的垂直方向)进行排列。


实例

把弹性元素内的项目之一居中对齐:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. #main {
  6. width: 220px;
  7. height: 300px;
  8. border: 1px solid black;
  9. display: flex;
  10. align-items: flex-start;
  11. }
  12. #main div {
  13. flex: 1;
  14. }
  15. #myBlueDiv {
  16. align-self: center;
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <div id="main">
  22. <div style="background-color:coral;">红色</div>
  23. <div style="background-color:lightblue;" id="myBlueDiv">蓝色</div>
  24. <div style="background-color:lightgreen;">有更多内容的绿色 div</div>
  25. </div>
  26. <p><b>注释:</b>align-self 属性会覆盖容器的 align-items 属性。</p>
  27. <p><b>注释:</b>Internet Explorer 10 以及更早的版本不支持 align-self 属性。</p>
  28. </body>
  29. </html>

定义和用法

align-self 属性指定弹性容器内所选项目的对齐方式。

注意:align-self 属性将覆盖弹性容器的 align-items 属性。

默认值:auto
继承:
动画制作:不支持。请参阅:动画相关属性
版本:CSS3
JavaScript 语法:object.style.alignSelf="center"

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

带 -webkit- 的数字表示使用前缀的首个个版本。

属性
align-self21.011.020.09.07.0 -webkit-12.1

CSS 语法

  1. 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

相关页面

CSS 参考手册:align-content 属性CSS 参考手册:align-items 属性

分类导航