Question

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

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

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

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

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

3 个答案: