如何垂直alignment一个div内的图像？
题
你如何alignment一个包含div的图像？
例
在我的例子中，我需要将<div>的<img> <div>与class ="frame ”`垂直居中：
<div class="frame" style="height: 25px;"> <img src="http://jsfiddle.net/img/logo.png" /> </div>
.frame的高度是固定的，图像的高度是未知的。 如果这是唯一的解决scheme，我可以在.frame添加新的元素。 我试图在IE≥7，Webkit，Gecko上做到这一点。
在这里看到jsfiddle： http : //jsfiddle.net/4RPFa/61/
我所知道的唯一的（也是最好的跨浏览器）方法是在两个元素上使用height: 100%和vertical-align: middle的inline-block帮助器。
所以有一个解决scheme： http : //jsfiddle.net/kizu/4RPFa/4570/
.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; }
<div class=frame> <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=250 /> </div> <div class=frame> <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=25 /> </div> <div class=frame> <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=23 /> </div> <div class=frame> <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=21 /> </div> <div class=frame> <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=19 /> </div> <div class=frame> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=17 /> </div> <div class=frame> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=15 /> </div> <div class=frame> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=13 /> </div> <div class=frame> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=11 /> </div> <div class=frame> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=9 /> </div> <div class=frame> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=7 /> </div> <div class=frame> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=5 /> </div> <div class=frame> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=3 /> </div>
这可能是有用的：
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的解决scheme是一个好的开始，但超大的图像有一个错误的比例。
这是我的叉子：
演示： https : //jsbin.com/lidebapomi/edit?html,css,output
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; }
纯粹的CSS解决scheme：
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; }
关键的东西
// 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
三线解决scheme：
position: relative; top: 50%; transform: translateY(-50%);
这适用于任何事情。
从这里 。
这样你可以垂直居中一个图像（ 演示 ）：
div{ height:150px; //IE7fix line-height: 150px; } img{ vertical-align: middle; margin-bottom:0.25em; }
对于那些登陆这篇文章，并有兴趣在一个更现代的解决scheme，并不需要支持传统的浏览器，你可以这样做：
.frame { display: flex; /*Uncomment below to center horizontally*/ /*justify-content: center;*/ align-items: center; } img { height: auto; } /* Styling stuff not needed for demo */ .frame { height: 100px; background: #000; }
<div class="frame"> <img src="http://jsfiddle.net/img/logo.png" /> </div>
您可以尝试设置PI的CSS来display: table-cell; vertical-align: middle; display: table-cell; vertical-align: middle;
.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; 为.frame。 Div.frame与此内联显示，因此您需要将其包装在块元素中。
这适用于FF，Opera，Chrome，Safari和IE8 +。
UPDATE
对于IE7我们需要添加一个CSSexpression式：
*:first-child+html img { position: relative; top: expression((this.parentNode.clientHeight-this.clientHeight)/2+"px"); }
背景图像解决scheme我一起去除了图像元素，并将其设置为一个.frame类的div的背景
这至less可以在IE8，FF6和Chrome13上正常工作
我检查，这个解决scheme将无法收缩图像大于25px的高度。 有一个名为background-size的属性，它设置了元素的大小，但是CSS3会和IE7的要求相冲突。
我会build议你重做你的浏览器的优先级和devise最好的浏览器，或者如果你想使用这个解决scheme，得到一些服务器端的代码来调整图像的大小
你可以这样做：
演示
CSS
.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的
$("img").each(function(){ this.style.marginTop = $(this).height() / -2 + "px"; })
Flexbox有一个超级简单的解决scheme！
.frame { display: flex; align-items: center; }
不知道关于IE浏览器，但在Firefox和Chrome，如果你有一个img在div容器，下面的CSS应该工作。 至less对我来说运作良好：
div.img-container { display:table-cell; vertical-align: middle; height: 450px; width: 490px; } div.img-container img { max-height: 450px; max-width: 490px; }
你可以尝试下面的代码
.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>
尝试用纯CSS的解决schemehttp://jsfiddle.net/sandeep/4RPFa/72/可能是您的HTML的主要问题。 当你在你的html中定义了lass和image height时，你不使用引号。
CSS：
.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标签时，从top离开3px to 2px空间。 现在我减lessline-height ，这是工作。 CSS：
.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/
在Firefox和Chrome浏览器input高度差异检查这个例子关于不同的line-height
我的解决scheme： 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; }
这适用于现代浏览器（编辑时为2016），如codepen上的演示所示
.frame { height: 25px; line-height: 25px; width: 160px; border: 1px solid #83A7D3; } .frame img { background: #3A6F9A; display:inline-block; vertical-align: middle; }
你要么给图像一个类或使用inheritance来定位你需要居中的图像是非常重要的。 在这个例子中，我们使用了.frame img {}这样只有一个带有.frame类的div所包装的图像才会被定位。
如果您可以使用像素大小的边距，只需添加font-size: 1px; 到.frame 。 但请记住，现在在.frame 1em = 1px上，也就是说，您还需要以像素为单位设置边距。
http://jsfiddle.net/feeela/4RPFa/96/
编辑：现在它不再在Opera中居中…
简单的方法，为我工作：
img { vertical-align: middle; display: inline-block; position: relative; }
适用于Google Chrome浏览器。 在不同的浏览器上试试这个。
使用桌子和桌子的解决scheme
有时应该通过显示为表格/表格单元来解决。 例如一个快速的标题屏幕。 W3也是推荐的方法。 我build议你检查一下这个叫W3C.org 中心的链接
这里使用的技巧是：
- 绝对定位容器显示为表格
- 垂直alignment显示为表格单元格的中心内容
.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>
我有同样的问题。 这适用于我：
<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>
想要alignment一个文本/标题之后有一个图像，都在一个div内？
请参阅JSfiddle或运行代码片段。
只要确保你的元素（div，img，title等）有一个ID或一个类。
对于我来说，在所有浏览器上都可以使用这个解决scheme（对于移动设备，您必须使用@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 alligned after image inside a div by negative manipulate the img postion</h2> </div>
最好的解决scheme是
.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; }
我一直在玩使用填充中心alignment。 您将需要定义顶级外容器大小，但内容器应该resize，并且可以将填充设置为不同的百分比值。
的jsfiddle
<div class='container'> <img src='image.jpg' /> </div> .container { padding: 20%; background-color: blue; } img { width: 100%; }
这个怎么样？
position: absolute; top: calc(50% - 0.5em); left: calc(50% - 0.5em); line-height: 1em;
你可以改变font-size
使用table和table-cell方法来完成这个工作，特别是因为你也定位了一些旧的浏览器，我为你创build了一个代码片段，你可以运行它并检查结果：
.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>
除了像这样的一些文本，在一个容器（它可能是一个标志）内的图像居中：
基本上你包装的形象
.outer-frame { border: 1px solid red; min-height: 200px; text-align: center; //only for align horizontally } .wrapper{ line-height: 200px; border: 2px dashed blue; border-radius: 20px; margin: 50px } img { //height: auto; vertical-align: middle; }
<div class="outer-frame"> <div class="wrapper"> some text <img src="http://via.placeholder.com/150x150"> </div> </div>
这个代码适合我。
<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>
我张贴在这里的老JSFiddle链接不再工作，这可能是downvote的原因。 只是为了这是一个有效的答案，我仍然想要再次发布jQuery解决scheme。 这适用于每个具有v_align类的元素。 它将在父母的垂直居中，并调整窗口的大小，将被重新计算。
链接到JSFiddle
$(document).ready(function() { // define the class that vertial aligns stuff var objects = '.v_align'; // initial setup verticalAlign(objects); // register resize event listener $(window).resize(function() { verticalAlign(objects); }); }); function verticalAlign(selector) { $(selector).each(function(val) { var parent_height = $(this).parent().height(); var dif = parent_height - $(this).height() // should only work if the parent is larger than the element var margin_top = dif > 0 ? dif/2 : 0; $(this).css("margin-top", margin_top + "px"); }); }
你可以在div里面使用表格结构
<div class="frame"> <table width="100%"> <tr> <td vertical-align="middle" align="center" height="25"> <img src="https://jsfiddle.net/img/logo.png" > </td> </tr> </table> </div>
