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

Question

I've done some research to figure out how to keep the text aligned with the red box (which will be replaced with an icon) after it wraps.

But now because of the float, the icon is raised to the top of the container <td> . Unfortunately now I'm stuck with how to center the div.imgwrap vertically within its parent, after the link wraps to two lines.

Is it possible to do this just with CSS, without having to modify the HTML? The obvious solution is to just add an extra column for the icons, but that would take a lot more work.

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

is this what u want?
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

Is this what you are looking for?

 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>