Images not aligning with vertical align

Question

I have the following issue:

I'm trying to get them all in line from the bottom, so that they're all sitting down. I've tried vertical-align: bottom; on the img, but nothing happens?

.social-icons img {
  margin-top: 40px;
  max-height: 35px!important;
  /*height:35px!important;*/
  max-width: 35px!important;
  /*width:35px!important;*/
  margin-left: 15px;
  float: left;
  vertical-align: bottom;
  padding-right: 30px;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
}

<!-- YouTube -->
<div class="icon">
  <a href="https://www.youtube.com/user/tthreeTV" onclick="window.open(' https://www.youtube.com/user/tthreeTV','newwindow','width=600, height=300');return false;">
    <img src="https://content.t-three.co.uk/hubfs/tp-2017/Template%20refresh/Littlebooks/TYP/youtube.png" alt="Facebook">
  </a>
</div>

<!-- LinkedIn -->
<div class="icon">
  <a return="false" href='https://www.linkedin.com/company/t-three-consulting' onclick="window.open(' https://www.linkedin.com/company/t-three-consulting','newwindow','width=600, height=300');return false;">
    <img src="https://content.t-three.co.uk/hubfs/tp-2017/Template%20refresh/Littlebooks/linkedin2.png" alt="LinedIn">
  </a>
</div>

<!-- Twitter -->
<div class="icon">
  <a return="false" href='https://twitter.com/tthreetweet' onclick="window.open(' https://twitter.com/tthreetweet','newwindow','width=600, height=300');return false;">
    <img src="https://content.t-three.co.uk/hubfs/tp-2017/Template%20refresh/Littlebooks/twitter2.png" alt="Twitter">
  </a>
</div>

<!-- Email -->
<div class="icon">
  <a href="mailto:test@test.com" target="_top">
    <img src="https://content.t-three.co.uk/hubfs/tp-2017/Template%20refresh/Littlebooks/mail.png" alt="Email">
  </a>
</div>

Why is this? Am I missing something oblivious?

Answer 1

Check this out. As it's a list of social icons I've found in my experience it's best to display them semantically as a list. This allows you to display:inline; them easier than divs.

https://codepen.io/Robhern135/pen/ppWgKr

body {
  background-color: black;
  width: 400px;
  margin: auto;
}

ul {
  padding: 40px 0 0 0;
  border-bottom: 2px solid white;
}

li {
  width: 35px;
  display: inline;
  margin: 0 40px 0 40px;
}

li.icon a {
  text-decoration: none;
}

.social-icons img {
  margin-top: 40px;
  max-height: 35px!important;
  /*height:35px!important;*/
  max-width: 35px!important;
  /*width:35px!important;*/
  margin-left: 15px;
  float: left;
  vertical-align: bottom;
  padding-right: 30px;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
}

<ul>
  <li class="icon">
    <a href="https://www.youtube.com/user/tthreeTV" onclick="window.open(' https://www.youtube.com/user/tthreeTV','newwindow','width=600, height=300');return false;">
      <img src="https://content.t-three.co.uk/hubfs/tp-2017/Template%20refresh/Littlebooks/TYP/youtube.png" alt="Facebook">
    </a>
  </li>

  <!-- LinkedIn -->
  <li class="icon">
    <a return="false" href='https://www.linkedin.com/company/t-three-consulting' onclick="window.open(' https://www.linkedin.com/company/t-three-consulting','newwindow','width=600, height=300');return false;">
      <img src="https://content.t-three.co.uk/hubfs/tp-2017/Template%20refresh/Littlebooks/linkedin2.png" alt="LinedIn">
    </a>
  </li>

  <!-- Twitter -->
  <li class="icon">
    <a return="false" href='https://twitter.com/tthreetweet' onclick="window.open(' https://twitter.com/tthreetweet','newwindow','width=600, height=300');return false;">
      <img src="https://content.t-three.co.uk/hubfs/tp-2017/Template%20refresh/Littlebooks/twitter2.png" alt="Twitter">
    </a>
  </li>

  <!-- Email -->
  <li class="icon">
    <a href="mailto:test@test.com" target="_top">
      <img src="https://content.t-three.co.uk/hubfs/tp-2017/Template%20refresh/Littlebooks/mail.png" alt="Email">
    </a>
  </li>
</ul>

I've included a border at the bottom for ease to see how it's aligned too. Any questions let me know.

Answer 2

First, you should have a container for all your icons with a fixed height and a line-height which is the same as height.

All the icon divs must be in displa: inline-block. The vertical-align is set to middle while line-height is "reset" to normal.

.icons {
  background-color: black;
  height: 100px;
  line-height: 100px;
}

.icons .icon {
  display: inline-block;
  margin-left: 15px;
  max-height: 35px!important;
  max-width: 35px!important;
  vertical-align: middle;
  line-height: normal;
}

<div class="icons">
<!-- YouTube -->
<div class="icon">
  <a href="https://www.youtube.com/user/tthreeTV" onclick="window.open(' https://www.youtube.com/user/tthreeTV','newwindow','width=600, height=300');return false;">
    <img src="https://content.t-three.co.uk/hubfs/tp-2017/Template%20refresh/Littlebooks/TYP/youtube.png" alt="Facebook">
  </a>
</div>

<!-- LinkedIn -->
<div class="icon">
  <a return="false" href='https://www.linkedin.com/company/t-three-consulting' onclick="window.open(' https://www.linkedin.com/company/t-three-consulting','newwindow','width=600, height=300');return false;">
    <img src="https://content.t-three.co.uk/hubfs/tp-2017/Template%20refresh/Littlebooks/linkedin2.png" alt="LinedIn">
  </a>
</div>

<!-- Twitter -->
<div class="icon">
  <a return="false" href='https://twitter.com/tthreetweet' onclick="window.open(' https://twitter.com/tthreetweet','newwindow','width=600, height=300');return false;">
    <img src="https://content.t-three.co.uk/hubfs/tp-2017/Template%20refresh/Littlebooks/twitter2.png" alt="Twitter">
  </a>
</div>

<!-- Email -->
<div class="icon">
  <a href="mailto:test@test.com" target="_top">
    <img src="https://content.t-three.co.uk/hubfs/tp-2017/Template%20refresh/Littlebooks/mail.png" alt="Email">
  </a>
</div>
</div>

Answer 3

The issue is you need to apply vertical-align to inline items. Currently, you have floated block elements. Unfloat and make them inline with display: inline; or display: inline-block;.

Ultimately I would use a more modern approach and use flexbox to solve this, align-items will do what you need.

div {
  display: flex;
  align-items: center;
}

div img {
  display: block;
  margin: 5px;
  max-width: 35px;
  max-height: 35px;
}

<div class="social">
  <a href="#"><img src="https://placehold.it/70x90"></a>
  <a href="#"><img src="https://placehold.it/35x35"></a>
  <a href="#"><img src="https://placehold.it/35x30"></a>
  <a href="#"><img src="https://placehold.it/35x35"></a>
</div>