Question

我正在尝试创建一个简单的页脚，每边都有图像，中间有一些文字。

问题是图像的大小不一样，因此对齐方式是从上到下，我知道它们是一种与中间对齐的方式 - 我试图使用

vertical-align:middle

但它不起作用。

这是我到目前为止所做的 - 如果你有更多关于做右脚的提示，我会很高兴听到。

Fiddle

Answer 1

页脚display: flex; align-items: center; justify-content: center;上的

ul将垂直和水平对齐页脚中的项目。同时从页脚中移除固定的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

将flexbox模块与justify-content: space-between一起使用。这将使容器的子节点彼此远离，使左右图像靠在边缘上。

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

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

在页脚中对齐图像

2 个答案: