table-cell与vertical-align属性关系示意实例页面

展示

代码

• HTML：

  <div class="box">
      <h4>图片vertical-align:middle</h4>
      <p class="cell cell-1"><img src="1.jpg"></p>
  </div>
  <div class="box">
      <h4>table-cell元素vertical-align:middle</h4>
      <p class="cell cell-2"><img src="1.jpg"></p>
  </div>

• CSS：

  .cell {
      height: 128px;
      display: table-cell;
      background-color: #f0f3f9;
      text-align: center;
  }
  .cell img {
      height: 96px;
  }
  /* 对比样式 */
  .cell-1 img {
      vertical-align: middle;
  }
  .cell-2 {
      vertical-align: middle;
  }