在 table 中间对齐图标

Question

我需要将 table 单元格中间的箭头对齐。我添加了 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 用于图片

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

Answer 2

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

中使用 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>

在 table 中间对齐图标

Align icon in the middle of table

html

css

vertical-alignment

css-tables