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

【问题标题】：How to properly float this image vertically aligned?如何正确浮动此图像垂直对齐？
【发布时间】：2023-03-30 18:05:02
【问题描述】：

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

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？

【问题讨论】：

How to vertically align an image inside div的可能重复
为什么不把text-align:right; 加到#header 上呢？它将保持垂直居中但提供您想要的正确对齐方式，不需要float。

标签： css

【解决方案1】：

在你的 div 中使用 text-align:right 代替 float: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;
}

【讨论】：

【解决方案2】：

float 属性使您失去了vertical-align 属性。

例如，您必须使用边距来纠正此问题：

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

查看更新小提琴：http://jsfiddle.net/uvpfedt6/2/

【讨论】：

【解决方案3】：

除了所有的浮动和伪元素，为什么不直接使用定位呢？相对定位父级，绝对定位图像：

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

【讨论】：

【解决方案4】：

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

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

Updated Fiddle

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

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

【讨论】：

【解决方案5】：

你可以使用边距

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

【讨论】：