关于css：如何在div中垂直对齐图像？

How to vertically align an image inside a div?

问题

如何在包含div的图像中对齐？

例子

在我的例子中，我需要将垂直居中于和class ="frame之间：

1	<img src="http://jsfiddle.net/img/logo.png" />

.frame的高度是固定的，图像的高度是未知的。如果这是唯一的解决方案，我可以在.frame中添加新元素。我想在IE≥7，webkit，gecko上做这个。

看这里的小提琴

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.frame {
height: 25px; /* equals max image height */
line-height: 25px;
width: 160px;
border: 1px solid red;

text-align: center; margin: 1em 0;
}
img {
background: #3A6F9A;
vertical-align: middle;
max-height: 25px;
max-width: 160px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

相关讨论

我所知道的唯一(也是最好的跨浏览器)方法是在两个元素上使用height: 100%和vertical-align: middle助手。

所以有一个解决方案：http://jsfiddle.net/kizu/4rpfa/4570/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

.frame {
height: 25px; /* equals max image height */
width: 160px;
border: 1px solid red;
white-space: nowrap; /* this is required unless you put the helper span closely near the img */

text-align: center; margin: 1em 0;
}

.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}

img {
background: #3A6F9A;
vertical-align: middle;
max-height: 25px;
max-width: 160px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

或者，如果您不想在现代浏览器中使用额外的元素，也不介意使用IE表达式，您可以使用一个伪元素，并使用一个方便的表达式将其添加到IE中，每个元素只运行一次，因此不会出现任何性能问题：

使用:before和expression()for ie的解决方案：http://jsfiddle.net/kizu/4rpfa/4571/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

.frame {
height: 25px; /* equals max image height */
width: 160px;
border: 1px solid red;
white-space: nowrap;

text-align: center; margin: 1em 0;
}

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

img {
background: #3A6F9A;
vertical-align: middle;
max-height: 25px;
max-width: 160px;
}

/* Move this to conditional comments */
.frame {
list-style:none;
behavior: expression(
function(t){
t.insertAdjacentHTML('afterBegin','<span class="frame_before"></span>');
t.runtimeStyle.behavior = 'none';
}(this)
);
}

1
2
3
4
5
6
7
8
9
10
11
12
13

它是如何工作的：

当两个inline-block元素彼此靠近时，可以将它们彼此对齐，因此使用vertical-align: middle可以得到如下结果：

Two aligned blocks

当你有一个固定高度的块(在px、em或其他绝对单位中)时，你可以在%中设置内块的高度。

因此，在固定高度的块中添加一个inline-block和height: 100%，将使其中的另一个inline-block元素(在您的情况下是)垂直靠近它。

相关讨论

+1在firefox 6上使用的是@arnaud576875，似乎只要从.frame上删除行高就可以了。对于IE，我想不出来。
在编辑中添加了解释。询问其他问题，我会解释的：)
据我所知，只有内联块元素可以拉伸到高度：100%；。我们不能用内联或块元素来完成这项工作，对吗？
您可以自己看到：jsfiddle.net/kizu/pw9nl-只有内联框不会生成框，但所有其他情况都正常。
我喜欢使用:before＋expression()，在过去我一直坚持使用额外的元素。我不在乎禁用Javascript的IE6/7，所以将来我可能会使用这种技术。
@ThintyDot此类表达式的最佳部分是，您可以将它们作为命名函数移动到外部.js文件(也包括在cc for ie中)，并且只在样式表中使用引用，您甚至可以通过解析原始元素的类名来在运行之前为创建类名。
有趣的是，我可以在2秒钟内使用表格完成这项工作，但是我需要使用像没人的业务这样的浏览器黑客来让它在纯CSS中工作。伟大的解决方案btw:)
回答得很好。我正在努力处理内联块元素之间的空间，也就是说在.frame和.frame:before之间。这里提出的解决方案是将margin-left: -4px添加到.frame中。希望这有帮助。
但有一个问题。当我放大，图像超过所有屏幕边界时，图像上方会出现一个巨大的空条。首先，只要我只穿过上下边界，一切都很好。但是，当左边框和右边框交叉时，helper元素会以某种方式阻碍。我真的认为，这是完美的解决方案。但谢谢你的努力。(Ubuntu 12.04，火狐23，xhtml 11 strict.dtd)
注意：不在添加的</span>助手的内部。它在外面。我几乎把每一根头发都拔了出来，却没有意识到这一点。
似乎您还需要在帧中添加"white space:nowrap；"，否则，如果您的图像和辅助范围之间有换行符，则会遇到问题。我花了一个小时才找到解决方案。
好吧，你在做伏特加的事，因为我现在正在FF试一试，它在嘲笑我：(
很好的解释，但我一直觉得奇怪的是，没有桌子就没有"合适"的方法。
上帝保佑你@juminoz那是我生命中的一个小时！我用的CMS有一个平面旧文本字段。甚至没有考虑到空白是问题所在。
在我的例子中，我的图像的最大高度和最大宽度都设置为100%，这样图像将缩放容器，而这种方法不起作用。我的解决方案是将这些值更改为90%(在我的情况下可以；在另一种情况下，您可能需要相应地缩放容器)，并在图像的另一侧添加一个助手，以便填充在两侧保持均匀。
不管有多少票，这个解决方案对我不起作用，但这个简单的纯CSS却起作用！stackoverflow.com/a/18516474/1390606
非常感谢！我需要这样做：)我总是用两个div来包装图像(一个带有display:table，另一个带有display:table cell)，从来没有必要在display:table row之间放置另一个div，但是我不知道为什么它在windows mobile上不起作用，如果a有位置：fixed；在图像上的任何div或以百分比表示的边距：但是yo我们的CSS做到了这一点，在IEMobile、IE7+和Chrome/Firefox(目前仅在最新版本上测试)上完美地工作，再次感谢！
@EricDub&233；我有一个类似的问题，我只是将跨度放在img之后而不是之前(或者使用：after而不是：before)，图像完全保留在容器中。
这不是工作时间
这在Safari中是行不通的，所以这不是一个好的解决方案，因为当用户在电话上打开页面时，它不会在中间对齐。
它在野生动物园工作。请在您声称不起作用时提供截图和/或演示。
如果有人对图像稍微向右移动有问题。诀窍是将"字体大小：0；"添加到父级。
感谢您对这项工作的详细解释，因为我能够将它应用于一个没有图像的奇怪情况，并且仍然可以使它工作。
这是美丽而简单的。谢谢您。当人们看到这样的解决方案并因为使用了一点CSS而将其击落时，我很难过。这是一个非常好的解决方案。谢谢您！
当在引导缩略图容器中使用它时，您会发现跨度从左侧移动了4个像素，您必须将其添加到帮助器span"Margin Left:-4px"的样式中，才能将其放置在正确的位置。
虽然这是可行的，但让我疯狂的是，一些如此基础的东西应该实现起来如此复杂，并且需要额外的标记才能使样式工作。这不符合CSS的全部精神吗？也许我只是对涉及的问题一无所知，但有时我认为CSS的设计者需要检查他们的头脑。请保持简单！常见的用例需要直观和简单的IMO实现。
我不知道为什么这对我不起作用，但我必须在我的图像CSS中添加display: inline-block;，如代码段上方的文本所述，但实际上不是在代码段中。
@Ryan如果你没有写下你的评论，说IMG在帮手之外，我刚才会很生气，非常感谢。
你好，对不起，我不同意在这里使用助手。而且这不是唯一的办法。其他浏览器也同样支持。我在这里提供了一个解决方案：stackoverflow.com/a/43308414/7733724和w3c.org about info。你可以查一下。干杯。
在我的项目中不起作用。我的外舱必须是固定的。我想一切都搞砸了
此解决方案仅适用于已知的图像高度，否则请在图像周围的元素(F.E.DIV)上使用："显示：表格单元格；文本对齐：居中；垂直对齐：居中"。
谢谢，伙计。你救了我的命：)

这可能有用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

div {
position:relative;
width:200px;
height:200px;
}
img {
position:absolute;
top:0;
bottom:0;
margin:auto;
}
.image {
min-height:50px
}

参考：http://www.student.oulu.fi/~laurirai/www/css/middle/

相关讨论

Matejkramny的解决方案是一个很好的开始，但是超大图像的比例是错误的。这是我的叉子：

演示：https://jsbin.com/lidbapomi/edit？HTML、CSS、输出

preview

HTML：

1	<img src="foo"/>

CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

.frame {
height: 160px; /*can be anything*/
width: 160px; /*can be anything*/
position: relative;
}
img {
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}

相关讨论

三线解决方案：

1
2
3

position: relative;
top: 50%;
transform: translateY(-50%);

这适用于任何事情。

从这里开始。

相关讨论

纯CSS解决方案：

http://jsfiddle.net/3mvpm/

CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

.frame {
margin: 1em 0;
height: 35px;
width: 160px;
border: 1px solid red;
position: relative;
}
img {
max-height: 25px;
max-width: 160px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background: #3A6F9A;
}

关键材料

1
2
3

// position: relative; - in .frame holds the absolute element within the frame
// top: 0; bottom: 0; left: 0; right: 0; - this is key for centering a component
// margin: auto; - centers the image horizontally & vertically

相关讨论

对于那些登陆本帖并对更现代的解决方案感兴趣且不需要支持传统浏览器的用户，您可以这样做：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

.frame {
display: flex;
/**
Uncomment 'justify-content' below to center horizontally.
? Read below for a better way to center vertically and horizontally.
**/

/*justify-content: center;*/
align-items: center;
}

img {
height: auto;

/**
? To center this image both vertically and horizontally,
in the .frame rule above comment the 'justify-content'
and 'align-items' declarations,
then uncomment 'margin: auto;' below.
**/

/*margin: auto;*/
}

/* Styling stuff not needed for demo */
.frame {
max-width: 900px;
height: 200px;
margin: auto;
background: #222;
}
p {
max-width: 900px;
margin: 20px auto 0;
}
img {
width: 150px;
}

1	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9988/hand-pointing.png">

这是一支钢笔：http://codepen.io/ricardozea/pen/aa0ee8e6021087b6e24664a0fa3f33e

相关讨论

这样，您可以垂直居中图像(演示)：

1
2
3
4
5
6
7
8

div{
height:150px; //IE7fix
line-height: 150px;
}
img{
vertical-align: middle;
margin-bottom:0.25em;
}

相关讨论

此外，您还可以使用flexbox获得正确的结果：

1
2
3
4
5
6
7
8

.parent {
align-items: center; /* for vertical align */
background: red;
display: flex;
height: 250px;
/* justify-content: center; <- for horizontal align */
width: 250px;
}

1	<img class="child" src="https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/stackoverflow-128.png" />

相关讨论

您可以尝试将pi的css设置为display: table-cell; vertical-align: middle;

相关讨论

有一个超级简单的解决方案与flexbox！

1
2
3
4

.frame {
display: flex;
align-items: center;
}

相关讨论

背景图像解决方案我将image元素全部删除，并将其设置为带有.frame类的DIV的背景。

http://jsfiddle.net/urlvka/2/

这至少在IE8、FF6和Chrome13上有效。

我检查过，这个解决方案不能缩小超过25px高度的图像。有一个名为background-size的属性，它确实设置了元素的大小，但它是css3，这会与ie7的要求冲突。

我建议你要么重做浏览器的优先级，设计最适合的浏览器，要么得到一些服务器端的代码来调整图片的大小，如果你想使用这个解决方案的话。

相关讨论

您可以尝试以下代码

1
2
3
4
5
6

.frame{
display:flex;
justify-content: center;
align-items: center;
width:100%;
}

1	<img src="http://jsfiddle.net/img/logo.png" />

相关讨论

http://jsfiddle.net/mbs64/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.frame {
height: 35px; /* equals max image height */
width: 160px;
border: 1px solid red;
text-align: center;
margin: 1em 0;
display: table-cell;
vertical-align: middle;
}
img {
background: #3A6F9A;
display: block;
max-height: 35px;
max-width: 160px;
}

键属性是display:table cell；for.frame。div.frame显示为与此内联，因此需要将其包装在一个块元素中。

它适用于FF、Opera、Chrome、Safari和IE8+。

更新

对于IE7，我们需要添加一个CSS表达式：

相关讨论

你可以这样做：

演示

http://jsfiddle.net/dz8vw/1

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

.frame {
height: 25px; /* equals max image height */
line-height: 25px;
width: 160px;
border: 1px solid red;

text-align: center; margin: 1em 0;
position: relative; /* Changes here... */
}
img {
background: #3A6F9A;
max-height: 25px;
max-width: 160px;
top: 50%; /* here.. */
left: 50%; /* here... */
position: absolute; /* and here */
}

JavaScript

1
2
3

$("img").each(function(){
this.style.marginTop = $(this).height() / -2 +"px";
})

相关讨论

使用纯CSS尝试此解决方案http://jsfiddle.net/sandeep/4rpfa/72/可能是HTML的主要问题。在HTML中定义class和image height时，不使用引号。

CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

.frame {
height: 25px; /* equals max image height */
width: 160px;
border: 1px solid red;
position:relative;
margin: 1em 0;
top: 50%;
text-align: center;
line-height: 24px;
margin-bottom:20px;
}

img {
background: #3A6F9A;
vertical-align: middle;
line-height:0;
margin:0 auto;
max-height:25px;
}

编辑：

当我使用img标签时，它会离开3px to 2px的空间。现在我减少了line-height，这是工作。CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

.frame {
height: 25px; /* equals max image height */
width: 160px;
border: 1px solid red;
margin: 1em 0;
text-align: center;
line-height:22px;
*:first-child+html line-height:24px; /* for IE7 */
}

img {
background: #3A6F9A;
vertical-align: middle;
line-height:0;
max-height:25px;
max-width:160px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
.frame {
line-height:20px; /* webkit browsers */
}

line-height属性在不同浏览器中是不同的render。因此，我们必须定义不同的line-height属性浏览器

检查这个例子http://jsfiddle.net/sandeep/4be8t/11/

查看这个关于line-height的例子，不同浏览器中的不同，在firefox和chrome中的输入高度不同。

相关讨论

不确定IE，但是在火狐和Chrome下，如果在div容器中有一个img，那么下面的CSS应该可以工作。至少对我来说工作得很好：

1
2
3
4
5
6
7
8
9
10
11

div.img-container {
display:table-cell;
vertical-align: middle;
height: 450px;
width: 490px;
}

div.img-container img {
max-height: 450px;
max-width: 490px;
}

相关讨论

这适用于现代浏览器(编辑时为2016年)，如codepen上的演示所示。

1
2
3
4
5
6
7
8
9
10
11

.frame {
height: 25px;
line-height: 25px;
width: 160px;
border: 1px solid #83A7D3;
}
.frame img {
background: #3A6F9A;
display:inline-block;
vertical-align: middle;
}

很重要的一点是，您要么给图像一个类，要么使用继承来定位您需要居中的图像。在这个例子中，我们使用了.frame img {}，这样只有一个带有.frame类的DIV所包装的图像才会成为目标。

相关讨论

我的解决方案：http://jsfiddle.net/xnaj6/2/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<img src="http://jsfiddle.net/img/logo.png" class="img" alt="" />

.container {
display: table;
float: left;
border: solid black 1px;
margin: 2px;
padding: 0;
background-color: black;
width: 150px;
height: 150px;
}
.frame {
display: table-cell;
text-align: center;
vertical-align: middle;
border-width: 0;
}
.img {
max-width: 150px;
max-height: 150px;
vertical-align: middle;
}

使用表格单元格的解决方案

有时它应该通过显示为表/表单元来解决。例如，快速标题屏幕。这也是W3推荐的方法。我建议您检查W3C.org中名为"居中"的链接。

这里使用的提示是：

绝对定位容器显示为表格
与显示为表格单元格的中心内容垂直对齐

1
2
3
4
5
6
7
8
9
10

.container {
position:absolute;
display:table;
width:100%;
height:100%;
}
.content {
display:table-cell;
vertical-align:middle;
}

1	<h1 style="text-align:center"> PEACE IN THE WORLD

就我个人而言，我实际上不同意将助手用于此目的。

除了像这样的文本，还可以将图像放在容器内(可以是徽标)的中心位置：

enter image description here

基本上你把图像包装起来

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

.outer-frame {
border: 1px solid red;
min-height: 200px;
text-align: center; /* only to align horizontally */
}

.wrapper{
line-height: 200px;
border: 2px dashed blue;
border-radius: 20px;
margin: 50px
}

img {
/* height: auto; */
vertical-align: middle; /* only to align vertically */
}

1 2	some text <img src="http://via.placeholder.com/150x150">

适合我的简单方法：

1
2
3
4
5

img {
vertical-align: middle;
display: inline-block;
position: relative;
}

很适合谷歌Chrome。在不同的浏览器上试试这个。

相关讨论

如果你可以使用像素大小的空白，只需将font-size: 1px;添加到.frame中即可。但请记住，现在在.frame1em=1px上，也就是说，需要以像素为单位设置边界。

http://jsfiddle.net/feeela/4rpfa/96/

编辑：现在它不再以歌剧为中心了…

使用table和table-cell方法来完成这项工作，特别是因为您也瞄准了一些旧的浏览器，所以我为您创建了一个片段，您可以运行它并检查结果：

1
2
3
4
5
6
7
8
9
10
11

.wrapper {
position: relative;
display: table;
width: 300px;
height: 200px;
}

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

1
2
3
4
5
6

<p>
Centre me please!!!
</p>

<img src="https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/stackoverflow-128.png" />

你可以用这个

1
2
3
4
5
6
7
8
9

.loaderimage {
position: absolute;
top: 50%;
left: 50%;
width: 60px;
height: 60px;
margin-top: -30px;/*50% of the height*/
margin-left: -30px;
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

相关讨论

最好的解决办法是

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

.block{
/* decor */
padding:0 20px;
background:#666;
border:2px solid #fff;
text-align:center;
/* important */
min-height:220px;
width:260px;
white-space:nowrap;
}
.block:after{
content:'';
display:inline-block;
height:220px; /* the same as min-height */
width:1px;
overflow:hidden;
margin:0 0 0 -5px;
vertical-align:middle;
}
.block span{
vertical-align:middle;
display:inline-block;
white-space:normal;
}

我一直在用填充物来调整中心。您将需要定义顶级外部容器大小，但内部容器应调整大小，并且可以将填充设置为不同的百分比值。

杰西德

1
2
3
4
5
6
7
8
9
10
11

<img src='image.jpg' />

.container {
padding: 20%;
background-color: blue;
}

img {
width: 100%;
}

这个怎么样？

1
2
3
4

position: absolute;
top: calc(50% - 0.5em);
left: calc(50% - 0.5em);
line-height: 1em;

你也可以改变。

是否要将文本/标题后的图像与DIV中的图像对齐？

请参见JSfiddle或运行代码段。

只需确保在所有元素(DIV、IMG、TITLE等)中都有一个ID或类。

对于我来说，这个解决方案适用于所有浏览器(对于移动设备，您必须使用：@media调整代码)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

h2.h2red {
color: red;
font-size: 14px;
}
.mydivclass {
margin-top: 30px;
display: block;
}
img.mydesiredclass {
margin-right: 10px;
display: block;
float: left;/*If you want to allign the text with an image on the same row*/
width: 100px;
heght: 100px;
margin-top: -40px/*Change this value to adapt to your page*/;
}

1
2
3

<br />
<img class="mydesiredclass" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Wikipedia-logo-v2-en.svg/2000px-Wikipedia-logo-v2-en.svg.png">
<h2 class="h2red">Text alligned after image inside a div by negative manipulate the img postion

这个代码对我很好。

1
2
3
4
5
6
7
8

我在这里发布的旧jspiddle链接已经不起作用了，这可能是投反对票的原因。为了这个有效的答案，我还是想再次发布jquery解决方案。这适用于应用了v_align类的每个元素。它将在父级中垂直居中，并且在调整窗口大小时将重新计算。

链接到JSfiddle

相关讨论

我在寻找一个类似的答案，一些建议把图像截取到左边，或者垂直比例使图像弯曲，所以我提出了这个解决方案…它将内容垂直和水平居中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.div{
position: relative;
overflow: hidden;
}
.bantop img {
position: absolute;
margin: auto;
width: 103%;
height: auto;
top: -50%;
bottom: -50%;
left: -50%;
right: -50%;
}

我在几个项目中使用它，它就像一个sharm

可以在DIV中使用表结构

1
2
3
4
5
6
7

相关讨论

您可以使用grid布局垂直居中图像。

1
2
3
4
5
6
7
8
9
10
11

.frame {
display: grid;
grid-template-areas:"."
"img"
"."
grid-template-rows: 1fr auto 1fr;
grid-template-columns: auto;
}
.frame img {
grid-area: img;
}

这将创建一个3行1列网格布局，在顶部和底部使用未命名的1分数宽间隔符，并创建一个名为img的区域，该区域的高度(内容大小)为auto。

img将使用它喜欢的空间，顶部和底部的垫片将使用剩余的高度分割成两个相等的分数，从而使img元素垂直居中。

http://jsfiddle.net/kissaki0/4rpfa/20713/