如何在div中垂直对齐图像

如何在包含div内部对齐图像？

例

在我的示例中，我需要使用class ="frame ”将<img>在<div>垂直居中：

<div class="frame" style="height: 25px;"><img src="http://jsfiddle.net/img/logo.png" />
</div>

.frame的高度是固定的，图像的高度是未知的。如果这是唯一的解决方案，则可以在.frame添加新元素。我正在尝试在Internet Explorer 7和更高版本的WebKit，Gecko上执行此操作。

在这里查看jsfiddle。

 .frame { height: 25px; /* Equals maximum 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; }

 <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=250 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=25 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=23 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=21 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=19 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=17 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=15 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=13 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=11 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=9 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=7 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=5 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=3 /> </div>

#1楼

这可能有用：

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/

#2楼

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

<style type="text/css">div.parent {position: relative;}img.child {bottom: 0;left: 0;margin: auto;position: absolute;right: 0;top: 0;}
</style><div class="parent"><img class="child">
</div>

#3楼

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

<div class="container"><div class="frame"><img src="http://jsfiddle.net/img/logo.png" class="img" alt="" /></div>
</div>.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;
}

#4楼

matejkramny的解决方案是一个不错的开始，但是过大的图像比例错误。

这是我的叉子：

演示： https : //jsbin.com/lidebapomi/edit?html,css，输出

HTML：

<div class="frame"><img src="foo"/>
</div>

CSS：

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

#5楼

这样，您可以将图像垂直居中（ demo ）：

div{height: 150px; // Internet Explorer 7 fixline-height: 150px;
}
img{vertical-align: middle;margin-bottom: 0.25em;
}

#6楼

我不确定Internet Explorer，但是在Firefox和Chrome下，如果div容器中有img ，则以下CSS内容应该可以使用。至少对我来说效果很好：

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

#7楼

最好的解决方案是

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

#8楼

三行解决方案：

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

这适用于任何东西。

从这里。

#9楼

一个对我有用的简单方法：

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

它非常适合Google Chrome浏览器。在其他浏览器中尝试一下。

#10楼

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

jsfiddle

<div class='container'><img src='image.jpg' />
</div>.container {padding: 20%;background-color: blue;
}img {width: 100%;
}

#11楼

对于更现代的解决方案，如果不需要支持旧版浏览器，则可以执行以下操作：

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

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

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

#12楼

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

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

#13楼

您可以尝试以下代码：

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

 <div class="frame" style="height: 25px;"> <img src="http://jsfiddle.net/img/logo.png" /> </div>

#14楼

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

有时应通过显示为table / table-cell来解决。例如，快速标题屏幕。这也是W3推荐的方式。我建议您检查此链接，该链接称为W3C.org中的“ 将块或图像居中” 。

这里使用的技巧是：

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

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

 <div class="container"> <div class="content"> <h1 style="text-align:center">Peace in the world</h1> </div> </div>

就我个人而言，我实际上不同意为此目的使用辅助工具。

#15楼

使用这个：

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

您可以更改font-size 。

#16楼

是否要对齐文本/标题之后且都在div内的图像？

参见JSfiddle或运行代码片段。

只要确保在所有元素（div，img，标题等）上都有一个ID或一个类即可。

对我来说，此解决方案可在所有浏览器上使用（对于移动设备，您必须使用@media修改代码）。

 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 */; }

 <div class="mydivclass"> <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 aligned after image inside a div by negative manipulate the img position</h2> </div>

#17楼

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

 .wrapper { position: relative; display: table; width: 300px; height: 200px; } .inside { vertical-align: middle; display: table-cell; }

 <div class="wrapper"> <div class="inside"> <p>Centre me please!!!</p> </div> <div class="inside"> <img src="https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/stackoverflow-128.png" /> </div> </div>

#18楼

为了使图像居中放置在容器（可能是徽标）中，除了像这样的一些文字：

基本上，您包装图像

 .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 */ }

 <div class="outer-frame"> <div class="wrapper"> some text <img src="http://via.placeholder.com/150x150"> </div> </div>

#19楼

这段代码对我很有用。

<style>.listing_container{width:300px; height:300px;font: 0/0 a;}.listing_container:before { content: ' ';display: inline-block;vertical-align: bottom;height: 100%;}.listing_container img{ display: inline-block; vertical-align: middle;font: 16px/1 Arial sans-serif; max-height:100%; max-width:100%;}
<style><div class="listing_container"><img src="http://www.advancewebsites.com/img/theme1/logo.png">
</div>

#20楼

另外，您可以使用Flexbox获得正确的结果：

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

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

#21楼

您可以使用此：

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

#22楼

想像你有

<div class="wrap"><img src="#">
</div>

和CSS：

.wrap {display: flex;
}
.wrap img {object-fit: contain;
}

#23楼

这适用于现代浏览器（编辑时为2016年），如本演示中的Codepen所示

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

给图像一个类或使用继承来定位需要居中的图像非常重要。在此示例中，我们使用.frame img {}以便仅将由div包装的带有.frame类的图像作为目标。

#24楼

背景图片解决方案

我完全删除了图像元素，并使用.frame类将其设置为div的背景

http://jsfiddle.net/URVKa/2/

至少在Internet Explorer 8，Firefox 6和Chrome 13上可以正常工作。

我检查了一下，该解决方案无法缩小大于25像素高度的图像。有一个称为background-size的属性可以设置元素的大小，但是CSS 3会与Internet Explorer 7的要求相冲突。

我建议您要么重新设置浏览器优先级并设计最佳的浏览器，要么获得一些服务器端代码来调整图像的大小（如果您想使用此解决方案）。

#25楼

您可以这样做：

演示版

http://jsfiddle.net/DZ8vW/1

的CSS

.frame {height: 25px;      /* Equals maximum 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

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

#26楼

http://jsfiddle.net/MBs64/

.frame {height: 35px;      /* Equals maximum 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; 对于.frame 。 Div.frame与此内联显示，因此您需要将其包装在block元素中。

这适用于Firefox，Opera，Chrome，Safari和Internet Explorer 8（及更高版本）。

更新

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

*:first-child+html img {position: relative;top: expression((this.parentNode.clientHeight-this.clientHeight)/2+"px");
}

#27楼

纯 CSS解决方案：

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

 <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=250 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=25 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=23 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=21 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=19 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=17 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=15 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=13 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=11 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=9 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=7 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=5 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=3 /> </div>

关键的东西

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

#28楼

使用纯CSS http://jsfiddle.net/sandeep/4RPFa/72/尝试此解决方案

也许这是HTML的主要问题。当你定义c您没有使用引号lass和image height在你的HTML。

CSS：

.frame {height: 25px;      /* Equals maximum 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标签时，它与top距离为3像素到2像素。现在，我降低line-height ，它正在工作。

CSS：

    .frame {height: 25px;      /* Equals maximum image height */width: 160px;border: 1px solid red;margin: 1em 0;text-align: center;line-height: 22px;*:first-child+html line-height:24px; /* For Internet Explorer 7 */}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属性的呈现方式有所不同。因此，我们必须定义不同的line-height属性浏览器。

检查此示例： http : //jsfiddle.net/sandeep/4be8t/11/

查看此示例，了解不同浏览器中的line-height不同： 在Firefox和Chrome中输入高度差

#29楼

据我所知，唯一（也是最好的跨浏览器）方法是在两个元素上使用height: 100%和vertical-align: middle的inline-block帮助器。

因此，有一个解决方案： http : //jsfiddle.net/kizu/4RPFa/4570/

 .frame { height: 25px; /* Equals maximum 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; }

 <div class="frame"> <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=250px /> </div> <div class="frame"> <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=25px /> </div> <div class="frame"> <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=23px /> </div> <div class="frame"> <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=21px /> </div> <div class="frame"> <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=19px /> </div> <div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=17px /> </div> <div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=15px /> </div> <div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=13px /> </div> <div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=11px /> </div> <div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=9px /> </div> <div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=7px /> </div> <div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=5px /> </div> <div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=3px /> </div>

或者，如果您不想在现代浏览器中添加多余的元素并且不介意使用Internet Explorer表达式，则可以使用伪元素，然后使用方便的表达式将其添加到Internet Explorer，该表达式每个元素仅运行一次，因此不会有任何性能问题：

Internet Explorer的： :before和expression()解决方案： http : //jsfiddle.net/kizu/4RPFa/4571/

 .frame { height: 25px; /* Equals maximum 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) ); }

 <div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=250px /></div> <div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=25px /></div> <div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=23px /></div> <div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=21px /></div> <div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=19px /></div> <div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=17px /></div> <div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=15px /></div> <div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=13px /></div> <div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=11px /></div> <div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=9px /></div> <div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=7px /></div> <div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=5px /></div> <div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=3px /></div>

怎么运行的：

当您有两个彼此相邻的inline-block元素时，您可以使它们彼此对齐，因此，使用vertical-align: middle您将得到如下所示的内容：
当您使用固定高度的块（以px ， em或其他绝对单位表示）时，可以将内部块的高度设置为% 。
因此，添加一个height: 100% inline-block height: 100%在高度固定的块中height: 100%将使其中的另一个inline-block元素（在您的情况下为<img/> ）垂直对齐。

#30楼

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

#31楼

如果您可以使用像素大小的边距，只需添加font-size: 1px; 到.frame 。但是请记住，现在在.frame 1em = 1px上，这意味着您也需要以像素为单位设置边距。

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

现在它不再在Opera中居中...