RoyBar RoyBar - 1 year ago 72
CSS Question

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


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.


Answer Source

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">
        <li class="pull-left">
          <img src="" class="pull-left img-responsive">
        <li class="pull-center">&copy;QBS LAB - &copy;TCWD 2017</li>
        <li class="pull-right">
          <img src="" class="pull-right img-responsive">

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download