对齐表格中间的图标答案

【问题标题】：Align icon in the middle of table对齐表格中间的图标
【发布时间】：2018-01-14 14:10:58
【问题描述】：

我需要对齐表格单元格中间的箭头。我添加了vertical-align: middle;，但它不起作用。请帮我解决这个问题。

.table {
  display: table;
  border: 1px solid black;
}

.table-cell {
  height: 30px;
  display: table-cell;
  vertical-align: middle;
  padding-left: 25px;
  padding-right: 25px;
}

img {
  float: right;
}

date {
  display: block;
}

<div class="table">
  <div class="row">

    <div class="table-cell">
      <span>Lorem ipsum</span>
    </div>
    <div class="table-cell">
      <span>Lorem ipsum</span>
    </div>
    <div class="table-cell">
      <span>Text1 lorem</span>
      <date>28-01-2017</date>
      <img src="https://image.flaticon.com/icons/svg/60/60758.svg" width="12px" height="12px">
    </div>
  </div>
</div>

【问题讨论】：

为什么不使用position: absolute呢？

标签： html css vertical-alignment css-tables

【解决方案1】：

您需要使用position:absolute。我必须建议您为您的图标提供课程。因此，它将避免将来发生任何冲突。如果你在表中使用img。

.table {
      display: table;
      border: 1px solid black;
      position: relative;
    }

    .table-cell {
      height: 30px;
      display: table-cell;
      vertical-align: middle;
      padding-left: 25px;
      padding-right: 25px;
    }

    img.right-icon {
      position: absolute; right:5px; top: 50%; transform: translateY(-50%);
    }

    date {
      display: block;
    }

    <div class="table">
      <div class="row">

        <div class="table-cell">
          <span>Lorem ipsum</span>
        </div>
        <div class="table-cell">
          <span>Lorem ipsum</span>
        </div>
        <div class="table-cell">
          <span>Text1 lorem</span>
          <date>28-01-2017</date>
          <img class="right-icon" src="https://image.flaticon.com/icons/svg/60/60758.svg" width="12px" height="12px">
        </div>
      </div>
    </div>

【讨论】：

【解决方案2】：

请检查以下答案，我已使用position:absolute 获取图片

.table {
  display: table;
  border: 1px solid black;
  position:relative;
}

.table-cell {
  height: 30px;
  display: table-cell;
  vertical-align: middle;
  padding-left: 25px;
  padding-right: 25px;
}


 .table img {
   float: right;
   position: absolute;
   right: 5px;
   top: 39%;
}

date {
  display: block;
}

<div class="table">
  <div class="row">

    <div class="table-cell">
      <span>Lorem ipsum</span>
    </div>
    <div class="table-cell">
      <span>Lorem ipsum</span>
    </div>
    <div class="table-cell">
      <span>Text1 lorem</span>
      <date>28-01-2017</date>
      <img src="https://image.flaticon.com/icons/svg/60/60758.svg" width="12px" height="12px">
    </div>
  </div>
</div>

【讨论】：