将图像对齐div部分内的第二个图像的边缘

Question

我里面有两张照片，两张照片都有相同的高度，但宽度不同。我想以这种方式定位他们

1）宽度较大的图像（img1）应垂直居中放置 2）宽度较短的图像应与前一图像的左边缘对齐

最后，我希望得到如下图所示的内容

我应该在代码中更改

<div>
    <img src="img1"/>
    <img src="img2"/>
<div/>

Answer 1

试试这个：

div{padding:20px; display:table-cell; vertical-align:middle;}
img{float:left; clear:right}

Answer 2

首先，您要为图片指定ID：

<div>
    <img id="img1" src="img1"/>
    <img id="img2" src="img2"/>
<div/>

然后：

#img1 {
text-align: center;
}
#img2 {
 /* Your desired values */;
}