如何使用锚点和图像垂直居中浮动div答案

【问题标题】：How to vertical center floated div with anchor and image如何使用锚点和图像垂直居中浮动div
【发布时间】：2016-11-06 07:11:27
【问题描述】：

我想将我的图像放在浮动的 div 中。我试过vertical-align:middle; 但这并不成功。我猜那是因为它是浮动的。

我为我的问题创建了一个 jfiddle：https://jsfiddle.net/au0h6u0g/

【问题讨论】：

你可以在 img jsfiddle.net/au0h6u0g/4 上使用 line-height 和 vertical-align 或者 , display:table, inline-block, flex even transform ;)
@GCyrillus 谢谢，您的解决方案可能是最干净、最简单的。我建议您将其作为答案提交，以便我将其标记为答案。
好的，添加评论作为答案:)

标签： css center vertical-alignment

【解决方案1】：

您可以在img 和line-height 上使用vertical-align，例如：

.top {
  height: 150px;
  background-color: blue;
}

.container {
  float: right;
  line-height: 150px;
}

img {
  vertical-align: middle;
}

<div class="top">
  <div class="container">
    <a href="#">
      <img src="http://lorempixel.com/400/200/" alt="Smiley face" height="50" width="140">
    </a>
  </div>
</div>

https://jsfiddle.net/au0h6u0g/4/

【讨论】：

【解决方案2】：

您可以将display:table; 用于.top 和display:table-cell; 与vertical-align:middle; 与.container

.top
{
  width:100%;
  height: 150px;
  background-color:blue;
  display:table;
  direction:rtl;
}

.container
{
  display:table-cell;
  vertical-align:middle;
}

<div class="top">
  <div class="container">
    <a href="#">
      <img src="http://lorempixel.com/400/200/" alt="Smiley face" height="50"     width="140">
    </a>
  </div>
</div>

【讨论】：

【解决方案3】：

你应该看看Flexbox。

到.top，添加声明：

display: flex;
flex-direction: row;
align-items: center;

到.container，添加：

flex: auto 1 0;

最后，将 float: right 声明移动到 image 而不是容器。

查看更新后的Fiddle。

【讨论】：

【解决方案4】：

https://jsfiddle.net/au0h6u0g/5/

您可以使用绝对定位并根据元素大小转换偏移量。

<div class="top">
  <div class="container">
      <img src="http://lorempixel.com/400/200/" alt="Smiley face" height="50"     width="140">
  </div>
</div>

.top
{
  height: 150px;
  background-color:blue;
}

.container
{
  position: relative;
  height: 150px;
}

.container img{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

}

【讨论】：

【解决方案5】：

请看一下使其居中

  .container
{
  float:right;
  text-align: center;
  width:100%;
}

.container img {
  display: inline-block;
}

【讨论】：

问题是容器必须是float:right;

【解决方案6】：

您可以从答案的数量中看出，有许多方法可以做到这一点。这是另一个要求您将 img 绝对定位在每个轴上的 0px 处，然后使用 margin:0 将其居中：

.top {
  height: 150px;
  background-color:blue;
  position:relative;
}

.container img {
  float:right;/* < this is redundant but you said that you must have it.*/
  position:absolute;
  top:0; right:0; bottom:0; left:0;
  margin:auto;
}

<div class="top">
  <div class="container">
    <a href="#">
      <img src="http://lorempixel.com/400/200/" alt="Smiley face" height="50" width="140">
    </a>
  </div>
</div>

【讨论】：