align-items默认值图片和按钮的样式表现实例页面

展示

代码

• HTML：

  <h4>align-items:normal</h4>
  <div class="container align-normal">
      <img src="../images/pattern.png">
      <button>按钮的垂直对齐表现是？</button> 
  </div>
  <h4>align-items:start</h4>
  <div class="container align-start">
      <img src="../images/pattern.png">
      <button>按钮的垂直对齐表现是？</button> 
  </div>
  <h4>align-items:stretch</h4>
  <div class="container align-stretch">
      <img src="../images/pattern.png">
      <button>按钮的垂直对齐表现是？</button> 
  </div>

• CSS：

  .container {
      display: grid;
      height: 120px;
      grid: auto / 1fr 1fr;
      outline: 1px dotted;
  }
  .align-normal {
      align-items: normal;
  }
  .align-start {
      align-items: start;
  }
  .align-stretch {
      align-items: stretch;
  }