如何在包含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{
  height: 150px; // Internet Explorer 7 fix
  line-height: 150px;
}
img{
  vertical-align: middle;
  margin-bottom: 0.25em;
}

其他回答

想要对齐文本/标题之后且两者都在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>

此外,您可以使用Flexbox获得正确的结果:

.父级{对齐项目:居中;/*用于垂直对齐*/背景:红色;显示:柔性;高度:250px;/*对齐内容:中心;<-用于水平对齐*/宽度:250px;}<div class=“parent”><img class=“child”src=“https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/stackoverflow-128.png" /></div>

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

使用table和table cell方法完成这项工作,特别是因为您也针对一些旧浏览器,我为您创建了一个代码段,您可以运行它并检查结果:.包装器{位置:相对;显示:表格;宽度:300px;高度:200px;}.内部{垂直对齐:中间;显示:表格单元格;}<div class=“wrapper”><div class=“inside”><p>请让我居中</p></div><div class=“inside”><img src=“https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/stackoverflow-128.png" /></div></div>

我不确定InternetExplorer,但在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;
}