CODEWITHSUNDEEP
htmlcss
RoyBar
RoyBar

Reputation: 149

Aligning images in footer

I'm trying to create a simple footer with images to each side and some text in the middle.

Problem is the images aren't the same size and therefore the alignment is from top to bottom , i know their is a way to align to middle - I've tried to use

vertical-align:middle

But it didn't work.

Here is what I've done so far - if you have more tips for me regarding doing footer right i'll be glad to hear.

Fiddle

Upvotes: 0

Views: 4772

Answers (2)

SpliFF
SpliFF

Reputation: 39014

Use the flexbox module with justify-content: space-between. This will push the child nodes of your container away from each other so the left and right images sit against the edges.

footer {
    display: flex;
    justify-content: space-between;
    text-align: justify;
}

<footer>
    <img>
    <span>text</span>
    <img>
</footer>

Upvotes: 1

Michael Coker
Michael Coker

Reputation: 53709

display: flex; align-items: center; justify-content: center; on the footer ul will align the items in the footer vertically and horizontally. Also removed the fixed height from your footer and am applying top/bottom padding instead which will ensure even spacing on the top/bottom. And you have a random stray </p> that needs to be removed.

img {
  width: 120px;
}

.container-footer {
  margin: auto;
  width: 100%;
  text-align: center;
}

#footer {
  background-color: #01b3d0;
  padding: 1em 0;
}

#footer-images ul {
  padding: 0;
}

#footer-images li {
  list-style: none;
  margin: 0 10px;
  display: block;
}

#footer-images ul {
  display: flex;
  justify-content: center;
  align-items: center;
}
<div class="container-footer">
  <div id="footer">
    <div id="footer-images">
      <ul>
        <li class="pull-left">
          <img src="http://www.essai-automobile.com/actualites/photos-logos/jaguar-logo.png" class="pull-left img-responsive">
        </li>
        <li class="pull-center">&copy;QBS LAB - &copy;TCWD 2017</li>
        <li class="pull-right">
          <img src="https://s-media-cache-ak0.pinimg.com/originals/9e/0d/0d/9e0d0d29921036c2ff5e78d891573f45.png" class="pull-right img-responsive">
        </li>
      </ul>
    </div>
  </div>
</div>

Upvotes: 0

Related Questions