Question

这是我用来垂直对齐元素的标准代码在父元素内：

HTML

<div id="header">
    <img src="http://cdn.flaticon.com/png/256/60510.png" />
</div>

CSS

#header{
    border: 1px solid red;
    height: 30px;
}

img{
    height:20px;
    vertical-align: middle;
}

#header:before,
.frame_before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

http://jsfiddle.net/uvpfedt6/

它工作正常，但是当我想将img浮动到右边时 float：right ，img不再垂直对齐。

http://jsfiddle.net/uvpfedt6/1/

我应该如何修改我的代码以垂直对齐浮动的img？

Answer 1

float属性会让您失去vertical-align属性。

您必须以边距更正此值，例如：

img {
    height: 20px;
    float: right;
    margin-top: 5px;
    margin-right: 5px;
}

请参阅更新小提琴：http://jsfiddle.net/uvpfedt6/2/

Answer 2

为什么不只是使用定位而不是所有浮动和伪元素？相对地定位父级和图像：

#header {
    border: 1px solid red;
    height: 30px;
    position:relative;
}
img {
    height:20px;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    margin:auto;
}

<div id="header">
    <img src="http://cdn.flaticon.com/png/256/60510.png" />
</div>

Answer 3

vertical-align: middle仅适用于inline级或table-cell元素。

改为使用transform: translateY(-50%)和top: 50%。

的 Updated Fiddle

＆＃13;
＆＃13;
#header { border: 1px solid red; height: 30px; } img { position: relative; height: 20px; float: right; top: 50%; transform: translateY(-50%); } #header:before, .frame_before { content: ""; display: inline-block; height: 100%; vertical-align: middle; }
＆＃13;
<div id="header"> <img src="http://cdn.flaticon.com/png/256/60510.png" /> </div>
＆＃13;
＆＃13;
＆＃13;

Answer 4

您可以使用保证金

#header {
  border: 1px solid red;
  height: 30px;
}
img {
  position: relative;
  height: 20px;
  float: right;
  top: 50%;
  margin-top: -10px;
}
#header:before,
.frame_before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

<div id="header">
    <img src="http://cdn.flaticon.com/png/256/60510.png" />
</div>

Answer 5

而不是浮动：对，在div中使用text-align：right。

#header{
border: 1px solid red;
height: 30px;
text-align:right;
}

img{
height:20px;
vertical-align: middle;

}

#header:before,
.frame_before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}

如何正确浮动此图像垂直对齐？

5 个答案: