Div只是不会水平对齐

Question

我正试图让3个div在我的页脚中水平对齐。我已经尝试了很多不同的解决方案并且能够非常接近它们，但它们并没有完全一致。

截至目前，“biofreeze”元素有点过高，“rocktape”元素略微重叠“graston”元素。 “格雷斯顿”元素几乎就是我想要的地方。

使用边距似乎也不太好。

以下是代码：

#sponsors {
  width: 100% vertical-align: top !important;
}
#biofreeze {
  float: left;
  width: 33%;
}
#graston {
  float: left;
  width: 33%;
}
#rocktape {
  float: left;
  width: 33%;
}

<div id="sponsors">
  <div id="biofreeze">
    <a href="http://www.biofreeze.com/">
      <img src="http://placehold.it/200x200" />
    </a>
  </div>

  <div id="graston">
    <a href="http://www.grastontechnique.com/home">
      <img src="http://placehold.it/200x200" />
    </a>
  </div>

  <div id="rocktape">
    <a href="http://www.rocktape.com/">
      <img src="http://placehold.it/200x200" />
    </a>
  </div>
</div>

Answer 1

在这种情况下，您可以考虑将inline-block用于不同的height。此外，vertical-align不适用于float ed元素。另外，;之前没有vertical-align，所以它甚至不会影响。

#biofreeze,
#graston,
#rocktape {
  display: inline-block;
  width: 33%;
  vertical-align: top;
}

<div id="sponsors">
  <div id="biofreeze">
    <a href="http://www.biofreeze.com/">
      <img src="http://placehold.it/200x200" />
    </a>
  </div><div id="graston">
    <a href="http://www.grastontechnique.com/home">
      <img src="http://placehold.it/200x275" />
    </a>
  </div><div id="rocktape">
    <a href="http://www.rocktape.com/">
      <img src="http://placehold.it/200x100" />
    </a>
  </div>
</div>

或者，如果您希望所有这些都在中间对齐，则可以使用vertical-align: middle代替：

#biofreeze,
#graston,
#rocktape {
  display: inline-block;
  width: 33%;
  vertical-align: middle;
}

<div id="sponsors">
  <div id="biofreeze">
    <a href="http://www.biofreeze.com/">
      <img src="http://placehold.it/200x200" />
    </a>
  </div><div id="graston">
    <a href="http://www.grastontechnique.com/home">
      <img src="http://placehold.it/200x275" />
    </a>
  </div><div id="rocktape">
    <a href="http://www.rocktape.com/">
      <img src="http://placehold.it/200x100" />
    </a>
  </div>
</div>

Answer 2

100％工作代码

＆＃13;

＆＃13;

#sponsors {
  width: 100%;
  vertical-align: top !important;
  overflow:hidden;
  border:2px solid grey;
}


#biofreeze{
height:250px;
background-color:#07c;
}

#graston{
height:300px;
background-color:#cc5600;
}

#rocktape{
height:100px;
background-color:#45ba5b;
}


#biofreeze,#graston,#rocktape {
  display:inline-block;
  float: left;
  width: 33%;
}

＆＃13;

<div id="sponsors">
  <div id="biofreeze">
    Height:250px;
  </div>
  <div id="graston">
    Height:300px;
  </div>
  <div id="rocktape">
    Height:100px;
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;