题 如何垂直对齐div内的图像？


题

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

例

在我的例子中，我需要垂直居中 <img> 在里面 <div> 同 class ="frame“：

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

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

看到j​​sfiddle 这里


1132
2017-09-01 16:25


起源

您好，很抱歉，但我不同意在这里使用帮助程序是最有价值的解决方案。但这不是唯一的方法。浏览器支持其他人。我在这里提供了一个解决方案，请访问stackoverflow.com/a/43308414/7733724和W3C.org。你可以检查一下。干杯 - Sam
可能重复 如何为所有浏览器垂直居中div？ - Jitendar
阅读关于W3C的中心事物文章将非常有用： w3.org/Style/Examples/007/center.en.html - QMaster

答案:

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

所以有一个解决方案： 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>

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

解决方案 :before 和 expression() 对于IE： http://jsfiddle.net/kizu/4RPFa/4571/

.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)
    );
}
<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. 当你有两个 inline-block 彼此靠近的元素，你可以将每个元素对齐到另一边，所以用 vertical-align: middle 你会得到这样的东西：

    Two aligned blocks

  2. 当你有一个固定高度的块（在 px， em 或者其他绝对单位），你可以设置内部块的高度 %。

  3. 所以，加一个 inline-block 同 height: 100% 在具有固定高度的块中将对齐另一个 inline-block 元素在里面（<img/> 在你的情况下）垂直靠近它。

1820
2017-09-05 16:04


在编辑中添加了说明。问一下其他什么，我会解释:) - kizu
有趣的是，我可以在2秒钟内使用表格来完成此操作，但我需要使用浏览器黑客，就像没有人的业务一样，让它在纯CSS中运行。很棒的解决方案btw :) - dana
请注意： <img src=""/> 不在里面 <span></span> 已添加的助手。它在外面。我只是因为没有意识到这一点而拉扯我的每一根头发。 - ryan
看起来你还需要添加“white-space：nowrap;”如果您的图像和辅助跨度之间存在换行符，则会出现问题。我花了一个小时为什么这个解决方案不适合我。 - juminoz
上帝保佑你@juminoz这就像我生命中的一小时！我正在使用的该死的cms有一个平面旧文本字段。甚至没有考虑白色空间是问题。 - lupos

这可能很有用： 

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/


447
2017-07-30 05:57


这很好，但在IE 7中不起作用:( - Aram Kocharyan
如果您还希望水平对齐图像，请添加左：0;右：0; img - jameskind
这很好，但在IE 10中不起作用:( - Jenny O'Reilly
该死的，这很好用！该 auto margin 仅影响由设置的轴 absolute。 - Sven van Zoelen
这是唯一对我有用的解决方案。选择的答案在最新的Chrome中失败了。 - Egg

matejkramny的解决方案是一个良好的开端，但超大的图像有一个错误的比例。
这是我的分叉：

演示： https://jsbin.com/lidebapomi/edit?html,css,output

preview

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

377
2017-09-18 09:53


这适用于IE8 +，Chrome等...很好。 - Justin
@Justin完全有可能： jsbin.com/sejejemudi/2/edit （徘徊） - jomo
真棒！该解决方案甚至适用于流体div。 - Renan Ferreira
@bobo只是删除了 top: 0;。这只会导致 bottom: 0; 垂直应用。 - jomo
这应该是公认的解决方案，它的跨浏览器兼容并且工作得很好。 - Clain Dsilva

3线解决方案：

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

这适用于任何事情。

从 这里。


155
2018-02-10 04:48


对于那些想知道，这适用于IE9 + - Justin
前缀：-ms-或-webkit-（转换前）。 w3schools.com/cssref/css3_pr_transform.asp - Jorge Orpinel
IE9的前缀，但在IE8及更低版本中根本不起作用： caniuse.com/#search=transform 但我的意见是：我不关心IE8 - Reign.85
没有人注意到当要居中的孩子比设备屏幕更高并且父母是DOM中的第一个孩子时会发生什么？ - Andrei Gheorghiu
当你不能使用时很好 position: absolute; 因为你需要一个流动的宽度。 - plong0

一个纯粹的CSS解决方案：

http://jsfiddle.net/3MVPM/ 

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

125
2017-09-05 11:09


太好了！但它似乎在IE7中不起作用:( - arnaud576875
请让我给你推荐一个甚至适用于IE5的指南（从我到目前为止在帖子中读到的内容中扣除） webmasterworld.com/css/3350566.htm - code ninja
这个解决方案是一个良好的开端，但超大尺寸的图像可以调整大小 错误的比例。请看我的答案。 - jomo
@HansWürstchen是的，但重点是中心，是否超大是设计选择。添加更多css =更杂乱:) - code ninja
@matejkramny没有 得到 超大。 如果 图片 是 超大，它的比例错误。这意味着它在高度上拉伸并且看起来不正确。 - jomo

这样您就可以垂直居中（演示）：

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

95
2017-11-22 16:03


奇怪的是，在我的情况下，我无法得到已接受的答案（我还在使用overflow：hidden来裁剪图像）。但这完全奏效了。 - Luca Spiller
我只在Chrome中对此进行了测试，但线高似乎是关键。我把vertical-align属性放在div而不是img上，因为我的img在一个锚点内（<a/>）。 - Todd Price
是的，比公认的解决方案简单得多，而且效果很好。我也在jsfiddle中找到了这个解决方案。 - vdboor
如果你知道要达到什么样的高度，那么效果非常好 - Greggg
在FF，Chrome和Safari中测试它 - 它似乎真的有效 - klaffenboeck

对于那些登陆这篇文章并且对更现代的解决方案感兴趣并且不需要支持旧版浏览器的人，您可以这样做：

.frame {
    display: flex;
    /*Uncomment below to center horizontally*/
    /*justify-content: center;*/
    align-items: center;
}

img {
    height: 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


90
2017-12-29 20:13


看起来不错。可能会更改文本 - Drew
如果未设置容器的高度，这尤其有用 - Dave Barnett

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


19
2017-09-07 16:31


我见过各种方法，但这个方法对我来说是新的（即使在2013年）。 - Mike Ebert
比将图像放在桌子中只是为了居中它更好。 - Jonats
显示：如果您希望宽度为100％，则表格单元格的大小并不总是正确 - Redtopia

热门问题

针对Web开发人员的最佳新闻，Rmsys / git和git-for-windows / mingw-w64-x86_64-git有什向Django表单选择小部件添加如何在factory_girl工厂中包含一增加'处理IDisposable对象的Python装饰器处理文
licensed under cc by-sa 3.0 with attribution.
隐私政策 往来