Question

我想将我的图像放在一个浮动的div中。我试过vertical-align:middle;，但这并不成功。我猜那是因为它已经浮出水面了。

我已经创建了一个关于我的问题的小问题：https://jsfiddle.net/au0h6u0g/

Answer 1

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

＆＃13;

.top {
  height: 150px;
  background-color: blue;
}

.container {
  float: right;
  line-height: 150px;
}

img {
  vertical-align: middle;
}

＆＃13;

<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>

＆＃13;

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

Answer 2

请看看它的中心

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

.container img {
  display: inline-block;
}

Answer 3

您可以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>

Answer 4

您应该查看Flexbox。

要.top，请添加声明：

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

到.container，添加：

flex: auto 1 0;

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

请参阅更新后的Fiddle。

Answer 5

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

您可以根据元素大小使用绝对定位和平移offsett。

<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%);

}

Answer 6

正如您可以告诉表单的答案数量，有许多方法可以做到这一点。这是另一个要求您将img绝对定位在每个轴上的0px，然后使用margin:0将其置于中心位置：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

如何垂直中心浮动div与锚和图像

6 个答案: