如何垂直对齐div内的图像

Question

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

例

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

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

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

请参阅jsfiddle here。

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

Answer 1

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

所以有一个解决方案：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或其他绝对单位），您可以在%中设置内部块的高度。
因此，在一个具有固定高度的块中添加一个inline-block和height: 100%将在其中垂直对齐另一个inline-block元素（在您的情况下为<img/>）。

Answer 2

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

display: table-cell; vertical-align: middle;

Answer 3

您可以尝试以下代码：

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

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

Answer 4

背景图像解决方案

我完全删除了图像元素并将其设置为div的背景，并使用一类<div class="frame" style="height: 25px;"> <img src="http://jsfiddle.net/img/logo.png" /> </div>

.frame

这至少可以在Internet Explorer 8，Firefox 6和Chrome 13上正常运行。

我查了一下，这个解决方案无法收缩大于25像素高的图像。有一个名为http://jsfiddle.net/URVKa/2/的属性可以设置元素的大小，但它是CSS 3，它会与Internet Explorer 7的要求发生冲突。

我建议您重做浏览器优先级并设计最佳浏览器，或者如果您想使用此解决方案，请获取一些服务器端代码来调整图像大小。

Answer 5

你可以这样做：

演示

background-size

CSS

http://jsfiddle.net/DZ8vW/1

JavaScript的

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

Answer 6

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

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显示为与此内联，因此您需要将其包装在块元素中。

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

UPDATE

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

Div.frame

Answer 7

尝试使用纯CSS *:first-child+html img { position: relative; top: expression((this.parentNode.clientHeight-this.clientHeight)/2+"px"); }解决方案

也许这是HTML的主要问题。在HTML中定义chttp://jsfiddle.net/sandeep/4RPFa/72/和lass时，您没有使用引号。

CSS：

image height

当我使用.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离开3像素到2像素的空间。现在我减少top，它正在工作。

CSS：

line-height

.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

Answer 8

我不确定Internet Explorer，但在Firefox和Chrome下，如果input height differences in Firefox and Chrome容器中有img，则以下CSS内容应该有效。至少对我来说效果很好：

div

Answer 9

我的解决方案：div.img-container { display: table-cell; vertical-align: middle; height: 450px; width: 490px; } div.img-container img { max-height: 450px; max-width: 490px; }

http://jsfiddle.net/XNAj6/2/

Answer 10

这适用于现代浏览器（2016年编辑时），如此<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; }所示

demo on 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包装的图像才会被定位。

Answer 11

一种适合我的简单方法：

.frame

它适用于谷歌浏览器。在另一个浏览器中尝试这个。

Answer 12

这可能很有用：

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/

Answer 13

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

有时它应该通过显示为table / table-cell来解决。例如，快速标题屏幕。这也是W3的推荐方式。我建议你从W3C.org查看这个名为img { vertical-align: middle; display: inline-block; position: relative; }的链接。

这里使用的提示是：

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

Centering a block or image

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

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

Answer 14

用于将图像集中在容器内（它可能是徽标），除了这样的一些文本：

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

基本上你包装图像

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

Answer 15

如果您可以使用像素大小的边距，只需将<div class="outer-frame"> <div class="wrapper"> some text <img src="http://via.placeholder.com/150x150"> </div> </div>添加到font-size: 1px;即可。但请记住，现在在.frame 1em = 1px上，这意味着，您还需要设置以像素为单位的边距。

.frame

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

Answer 16

使用http://jsfiddle.net/feeela/4RPFa/96/和table方法完成这项工作，特别是因为你也针对一些旧的浏览器，我为你创建了一个代码片段，你可以运行它并检查结果：

table-cell

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

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

Answer 17

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

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

Answer 18

你可以用这个：

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

Answer 19

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

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

jsfiddle

Answer 20

最好的解决方案是

<div class='container'>
  <img src='image.jpg' />
</div>

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

img {
  width: 100%;
}

Answer 21

使用这个：

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

你可以改变position: absolute; top: calc(50% - 0.5em); left: calc(50% - 0.5em); line-height: 1em;。

Answer 22

想要对齐文本/标题之后的图像并且两者都在div中吗？

请参阅font-size或Run Code Snippet。

请确保在所有元素（div，img，title等）上都有ID或类。

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

JSfiddle

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

Answer 23

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

这是我的分叉：

但是：ぁzxswい

HTML：

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

CSS：

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

Answer 24

这段代码对我很有用。

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

Answer 25

三线解决方案：

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

这适用于任何事情。

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

Answer 26

纯CSS解决方案：

here

CSS：

http://jsfiddle.net/3MVPM/

关键的东西

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

Answer 27

对于更现代的解决方案，如果不需要支持旧版浏览器，您可以这样做：

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

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

Answer 28

这样您可以垂直居中图像（http://codepen.io/ricardozea/pen/aa0ee8e6021087b6e2460664a0fa3f3e）：

demo

Answer 29

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

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

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

Answer 30

您可以尝试将PI的CSS设置为<div class="parent"> <img class="child" src="https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/stackoverflow-128.png" /> </div>

如何垂直对齐div内的图像

问题描述投票：1285回答：34

例

34个回答

演示

CSS

JavaScript的

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

最新问题

如何垂直对齐div内的图像

问题描述 投票：1285回答：34

例

34个回答

演示

CSS

JavaScript的

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

最新问题

问题描述投票：1285回答：34