CODEWITHSUNDEEP
css
Kayson
Kayson

Reputation: 405

How do I keep this image in the floated div centered vertically when the text wraps?

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

Upvotes: 0

Views: 46

Answers (3)

Armin Ayari
Armin Ayari

Reputation: 619

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

Upvotes: 0

Victor.Chou
Victor.Chou

Reputation: 322

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

Upvotes: 2

Tushar
Tushar

Reputation: 4418

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>

Upvotes: 0

Related Questions