Question

在我的屏幕上，所有图片都排成一行，.find-us适合它，但由于某种原因，图片比文字更高。如何制作图片并找到适合我们的一行？

以下是JSFiddle和代码段：

.links {
  padding-top: 15px;
  height: 100%;
  background-color: #FF0000;
  display: inline-block;
  margin-top: 25px;
  width: 100%;
  text-align: left;
}
.links img {
  margin-left: 15px;
  margin-right: 15px;
}
.find-us {
  float: right;
  padding-right: 125px;
}

<div align="center" class="links">
  <a href="http://www.facebook.com/Andebautosltd">
    <img style="width: 140px; height: 63px;" src="http://andeb-autos.com/images/facebook.jpg" alt="Andeb Autos Facebook cleaning valeting products car vehicle automotive">
  </a>
  <a href="http://nielsenchemicals.com/">
    <img style="width: 221px; height: 62px;" src="http://andeb-autos.com/images/Nielsen%20Chemicals%20Banner.jpg" alt="Nielsen chemicals cleaning valeting products car vehicle automotive">
  </a>
  <a href="http://www.arrowchem.com/">
    <img style="width: 185px; height: 64px;" src="http://andeb-autos.com/images/arrow%20banner%20.jpg" alt="Arrow cleaning valeting products car vehicle automotive">
  </a>
  <a href="http://www.workshopwarehouse.co.uk">
    <img style="width: 155px; height: 62px;" src="http://andeb-autos.com/images/workshop%20warehouse%202.jpg" alt="Workshop Warehouse cleaning valeting products car vehicle automotive">
  </a>
  <a href="http://www.sealey.co.uk/PlPageBuilder.asp?gotonode=GuestHomepage&method=mGetHomepage">
    <img style="width: 185px; height: 62px;" src="http://andeb-autos.com/images/Sealey%20logo.jpg" alt="Sealey cleaning valeting products car vehicle automotive">
  </a>
  <div class="find-us">
    <h3>Find us...</h3>
    <ul>
      <li>
        <a href="#">
          <img src="#">
          <li>
        </a>
        <li>
          <a href="#">
            <img src="#">
            <li>
          </a>
    </ul>
  </div>
</div>

Answer 1

如果您正在寻找完美的路线，我建议您使用flex模型。

.links, .links > *,
.find-us, .find-us > *{
    display: flex;
    flex-direction: row;
    flex: 1;
    align-items: center; // play around with this value to change the alignment
}
img{
    display: block;
}
.links{
    background-color: #f04;
}

.find-us, .find-us > ul{
    flex-direction: column;
}

JSFiddle

Answer 2

Find the below fiddle link to align find us section in second line along with images. You need to do small modifications in the markup and css.

http://jsfiddle.net/nanduh/07tmvLe8/1/

将img标签和文本对齐在一行中

2 个答案: