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作为图片的信息

.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。我必须建议你为你的偶像提供课程。所以它将来会避免任何冲突。如果您在表格中使用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 个答案: