CODEWITHSUNDEEP
htmlcss
michaelmcgurk
michaelmcgurk

Reputation: 6509

Align images vertically with CSS and HTML

I'd like to align these 2 images vertically. Right now the first image is floating at the top, instead of in the middle.

HTML:

<div class="footer-logos">
    <a href=""><img src="http://preloaders.net/preloaders/182/Google%20plus%20logo.gif"></a>
    <a href=""><img src="https://developers.google.com/glass/images/icons/glass_logo_128.png"></a>
</a>

CSS:

.footer-logos {
    background:blue;
    width:100%;
    float:left
}

.footer-logos a {
margin: 50px 20px 50px 0;
float: left;
}

JSFiddle: http://jsfiddle.net/u588uddm/

Thanks for any assistance.

Upvotes: 0

Views: 63

Answers (2)

anji
anji

Reputation: 344

try this http://jsfiddle.net/u588uddm/4/

.footer-logos a:first-child {
    float: left;
    margin: 97px 20px 0 0;
}

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 114990

Don't float the links, use display:inline-block and vertical-align:middle

.footer-logos {
  background: blue;
  width: 100%;
  float: left
}
.footer-logos a {
  margin: 50px 20px 50px 0;
  display: inline-block;
  vertical-align: middle;
}
<div class="footer-logos">
  <a href="">
    <img src="http://preloaders.net/preloaders/182/Google%20plus%20logo.gif" />
  </a>
  <a href="">
    <img src="https://developers.google.com/glass/images/icons/glass_logo_128.png" />
  </a>
</div>

Upvotes: 4

Related Questions