CSS：为什么“vertical-align：middle”不起作用？

Consider the following example: (live demo here)

考虑以下示例:(现场演示）

HTML:

HTML：

<a><img src="http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge-131939.jpeg" /></a>

CSS:

CSS：

a {
    display: block;
    background: #000;
    line-height: 40px;  
}
img {
    vertical-align: middle;
}

The output is:

输出是：

Why the image is not vertically centered ?

为什么图像不是垂直居中的？

How could I fix that so it will work in all major browsers ?

我怎么能解决这个问题所以它可以在所有主流浏览器中使用？

Please don't assume any image size (like 32x32 in this case), because in the real case the image size is unknown.

请不要假设任何图像大小（在这种情况下像32x32），因为在实际情况下图像大小是未知的。

8 个解决方案

#1

You can use position:absolute; for this.

你可以使用position：absolute;为了这。

For example:

例如：

a {
    display: block;
    background: #000;
    line-height: 40px;
    height:80px;
    position:relative;  
}

img {
    position:absolute;
    top:50%;
    margin-top:-16px;
}

NOTE: This gives margin-top half of the image size.

注意：这会给出图像尺寸的上半部分。

Check this http://jsfiddle.net/cXUnT/7/

检查这个http://jsfiddle.net/cXUnT/7/

#2

I can't really tell you the specifics as to why this happens (I'm curious myself). But this works for me:

我不能真正告诉你为什么会发生这种情况（我很好奇）。但这对我有用：

a {
    display: block;
    background: #000;
    line-height: 40px;  
}
img {
    vertical-align: middle;
    margin-top:-4px; /* this work for me with any given line-height or img height */
}

#3

You should have display: table-cell I think, this works only in tables.. I use line-height equal to height of the element and it works too.

你应该有display：table-cell我认为，这只适用于表格。我使用的行高等于元素的高度，它也可以。

#4

I had the same problem. This works for me:

我有同样的问题。这对我有用：

 <style type="text/css">
    div.parent {
         position: relative;
    }

    /*vertical middle and horizontal center align*/
    img.child {
        bottom: 0;
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        top: 0;
    }
    </style>

    <div class="parent">
        <img class="child"> 
    </div>

#5

If you know the vertical size of the element and the line height, then you can vertically center it by using vertical-align: top plus a top margin.

如果您知道元素的垂直尺寸和线高，则可以使用vertical-align：top加上边距来垂直居中。

For illustration, I created: http://jsfiddle.net/feklee/cXUnT/30/

为了说明，我创建了：http：//jsfiddle.net/feklee/cXUnT/30/

#6

Just put the img tag inside a div tag the set display:table-cell vertical-align: middle to the div. Parent tag should be display:table

只需将img标签放在div标签内的set display：table-cell vertical-align：middle to the div。父标记应该是display：table

Example:

例：

Css

CSS

a {
 display: table;
 background: #000;
 height:200px;
}
div {
 display:table-cell;
 vertical-align: middle;
}

HTML

HTML

<a>
 <div>
  <img src="http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge-  131939.jpeg" />
 </div>
</a>

#7

Not sure what's the cause.

不确定是什么原因。

Removing the line-height and adding margins to the image does the trick.

删除行高并为图像添加边距就可以了。

a {
  display: block;
  background: #f00;
}
img {
  margin: .3em auto;
  vertical-align: middle;
}

<a>
 <img src="https://placeimg.com/30/30/any">
</a>

#8

Try using a background image on an <a>:

尝试在上使用背景图片：

<a href="#"></a>    
a {display:block;background:#000;line-height:40px;background:#000 url(http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge-131939.jpeg) no-repeat left center;text-indent:-999px}