文字换行时，如何在浮动div中将此图像保持在垂直居中位置？

Question

我进行了一些研究，以弄清楚在换行后如何使文本与红色框（将被图标替换）对齐。

但是现在由于浮动，图标被提升到容器<td>的顶部。 不幸的是，在链接换行为两行之后，我现在div.imgwrap停留在如何将div.imgwrap垂直居中的父级中。

是否可以仅使用CSS来执行此操作，而无需修改HTML？ 显而易见的解决方案是为图标添加一个额外的列，但这将需要更多的工作。

http://jsfiddle.net/fzvy5oca/

<table>
  <tr class="">
    <td>
      <div class="imgwrap">
        <img src="https://i.imgur.com/H2Vulqm.png" alt="[   ]" width="16" height="16">
      </div>

        <a href="test">test really long name....</a>

    </td>
    <td>smaller column</td>
    <td>small column</td>
    <td>medium size column</td>
  </tr>
</table>

CSS：

table,
tr,
td {
  border: solid 1px black;
  padding: 1em;
  text-align: left;
  vertical-align: middle;
  line-height: 1.125rem;
  font-size: 0.875rem;
  font-family: sans-serif;
}

.imgwrap {
  vertical-align: middle;
  display: inline-block;
  margin-right: 8px;
  float: left;
}

.imgwrap + a {
  vertical-align: middle;
  display: block;
  margin-left: 24px;
}

.imgwrap img {
  display: block;
}

a {
  text-decoration: none;
}

Answer 1

这就是你想要的吗？
http://jsfiddle.net/fzvy5oca/22/

的CSS

td {
  position: relative;
  border: solid 1px black;
  padding: 1em;
  text-align: left;
  vertical-align: middle;
  line-height: 1.125rem;
  font-size: 0.875rem;
  font-family: sans-serif;
}

.imgwrap {
  position: absolute;
  top: 50%;
  margin-top: -8px; /* half of #imgwrap's height */

  vertical-align: middle;
  display: inline-block;
  margin-right: 8px;
  float: left;
}

Answer 2

这是你想要的？

 table, tr, td { border: solid 1px black; padding: 1em; text-align: left; vertical-align: middle; line-height: 1.125rem; font-size: 0.875rem; font-family: sans-serif; /*Added*/ position: relative; } .imgwrap { vertical-align: middle; /*display: inline-block; removed */ margin-right: 8px; /*float: left; removed */ /*Added*/ position: absolute; top: 50%; transform: translateY(-50%); } .imgwrap + a { vertical-align: middle; display: block; margin-left: 24px; } .imgwrap img { display: block; } a { text-decoration: none; } 

 <table> <tr class=""> <td> <div class="imgwrap"> <img src="https://i.imgur.com/H2Vulqm.png" alt="[ ]" width="16" height="16"> </div> <a href="test">test really long name.test really long name.test really long name.test really long name.test really long name.test really long name.test really long name.test really long name....</a> </td> <td>smaller column</td> <td>small column</td> <td>medium size column</td> </tr> </table> 

Answer 3

 .imgwrap { display: grid; align-items: center; grid-template-columns: auto 1fr; margin-right: 8px; } 

  <table> <tr class=""> <td> <div class="imgwrap"> <img src="https://i.imgur.com/H2Vulqm.png" alt="[ ]" width="16" height="16"> <a href="test">test really long name....</a> </div> </td> <td>smaller column</td> <td>small column</td> <td>medium size column</td> </tr> </table>