html - 在表格中间对齐图标

Question

我需要对齐表格单元格中间的箭头。我添加了 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>

Answer 1

你需要使用position:absolute。我必须建议您为您的图标提供类(class)。因此，它将避免将来发生任何冲突。如果在表中使用 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>