フッタの画像を整列する

Question

私は両面の画像と真ん中のいくつかのテキストを含む単純なフッタを作成しようとしています。

問題は、画像のサイズが同じではありませんので、アライメントは、私が真ん中に整列する方法が自分の知っている、上から下にあるある - 私は

vertical-align:middle 

を使用しようとしたが、それしましたうまくいかなかった。

これまで私がこれまで行ってきたことは次のとおりです。フッターを正しくやっていることについて私にもっとヒントがあれば、聞いてうれしいです。上下左右フッタ内のアイテムを整列するulフッタに

Fiddle

Answer 1

display: flex; align-items: center; justify-content: center;

。また、固定フッテージheightをフッターから削除して、上部/下部に均等なスペースを確保するために、上部/下部のパッドを適用しています。そしてあなたはランダムな漂流</p>を取り除く必要があります。

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>

Answer 2

justify-content: space-betweenとフレキシボックスモジュールを使用してください。これにより、コンテナの子ノードが互いに離れるようにプッシュされ、左右の画像がエッジに当たるようになります。

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

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