如何在包含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中的图像吗？
请参阅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>
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;
}
关键属性是显示：表单元格；for.frame.Div.frame显示为与此内联，因此需要将其包装在块元素中。
这适用于Firefox、Opera、Chrome、Safari和Internet Explorer 8（及更高版本）。
更新
对于Internet Explorer 7，我们需要添加一个CSS表达式：
*:first-child+html img {
position: relative;
top: expression((this.parentNode.clientHeight-this.clientHeight)/2+"px");
}
CSS网格
如果要在图像容器内垂直对齐单个图像，可以使用以下方法：
.img-container {
display: grid;
}
img {
align-self: center;
}
.img容器{显示：栅格；栅格自动流动：列；背景：#BADA55；宽度：1200px；高度：500px；}img.垂直对齐{对齐自身：中心；}<div class=“img container”><img src=“https://picsum.photos/300/300" /><img class=“vertical align”src=“https://picsum.photos/300/300" /><img src=“https://picsum.photos/300/300" /></div>
如果要在图像容器中对齐多个图像，可以使用以下方法：
.img-container {
display: grid;
align-items: center;
}
.img容器{显示：栅格；栅格自动流动：列；对齐项目：居中；背景：#BADA55；宽度：1200px；高度：500px；}<div class=“img container”><img src=“https://picsum.photos/300/300" /><img src=“https://picsum.photos/300/300" /><img src=“https://picsum.photos/300/300" /></div>
请注意，我在这两种情况下都使用了grid auto-flow:column，因为否则元素会换行到指定显式网格项的行。在问题代码中，我也看到项目水平居中。在这种情况下，只需使用placeitems:center而不是alignitems:center。
