如何在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。

.框架{高度：25px；/*等于最大图像高度*/线条高度：25px；宽度：160px；边框：1px纯红色；文本对齐：居中；边距：1em 0；}国际货币基金组织{背景：#3A6F9A；垂直对齐：中间；最大高度：25px；最大宽度：160px；}＜div class＝frame＞<img src=“http://jsfiddle.net/img/logo.png“高度=250/></div>＜div class＝frame＞<img src=“http://jsfiddle.net/img/logo.png“高度=25/></div>＜div class＝frame＞<img src=“http://jsfiddle.net/img/logo.png“高度=23/></div>＜div class＝frame＞<img src=“http://jsfiddle.net/img/logo.png“高度=21/></div>＜div class＝frame＞<img src=“http://jsfiddle.net/img/logo.png“高度=19/></div>＜div class＝frame＞<img src=“http://jsfiddle.net/img/logo.png“高度=17/></div>＜div class＝frame＞<img src=“http://jsfiddle.net/img/logo.png“高度=15/></div>＜div class＝frame＞<img src=“http://jsfiddle.net/img/logo.png“高度=13/></div>＜div class＝frame＞<img src=“http://jsfiddle.net/img/logo.png“高度=11/></div>＜div class＝frame＞<img src=“http://jsfiddle.net/img/logo.png“高度=9/></div>＜div class＝frame＞<img src=“http://jsfiddle.net/img/logo.png“高度=7/></div>＜div class＝frame＞<img src=“http://jsfiddle.net/img/logo.png“高度=5/></div>＜div class＝frame＞<img src=“http://jsfiddle.net/img/logo.png“高度=3/></div>

当前回答

这可能很有用：

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

2012-07-30 05:57:45

其他回答

我的解决方案：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;
}

2013-08-23 05:52:27

背景图像解决方案

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

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

这至少在Internet Explorer 8、Firefox 6和Chrome 13上运行良好。

我检查过了，这个解决方案无法缩小超过25像素高度的图像。有一个名为backgroundsize的属性可以设置元素的大小，但CSS 3会与Internet Explorer 7的要求相冲突。

我建议你要么重做你的浏览器优先级，为最好的可用浏览器设计，要么获取一些服务器端代码来调整图像大小，如果你想使用这个解决方案。

2011-09-04 13:17:02

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

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

2013-01-26 19:46:52

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

2013-09-18 09:53:32

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

请参阅JSfiddle或运行代码段。

只需确保所有元素（div、img、title等）都有ID或类。

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

h2.h2红色{颜色：红色；字体大小：14px；}.mydiv类{页边空白：30px；显示：块；}img.mydesired类{右边距：10px；显示：块；float：左；/*如果要将文本与同一行上的图像对齐*/宽度：100px；高度：100px；margin-top:-40px/*更改此值以适应页面*/；}<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”>通过负操作img位置在div中的图像后对齐文本</h2></div>

2017-06-08 07:01:33

如何在div中垂直对齐图像

推荐文章

最新文章

标签