将元素与居中元素对齐答案

【问题标题】：Align an element next to a centered element将元素与居中元素对齐
【发布时间】：2014-01-26 21:54:28
【问题描述】：

我正在尝试将图像放置在第二张居中图像的右侧，如下所示：

|..........{IMAGE}{IMAGE2}..|

关于如何使图像居中的所有答案都使用margin: auto; 或<center>，这导致Image2 被发送到Image1 下方，或者带有text-align: center; 的周围div，我无法使图像居中。

我有一个临时解决方案，在 Image1 上使用左边距，并将两个图像都放在 <center> 内，但是如果窗口太小，这会导致图像不居中。有没有更好/更优雅的解决方案？

【问题讨论】：

对您进行jsfiddle.net 并与我们分享会很有帮助

标签： html css

【解决方案1】：

您可以通过负边距将第二张图片的宽度几乎减小为零。

body {
  text-align:center;
}
img {
  vertical-align:middle;
}
img + img {
  margin-right:-100px;/* equal to width of image , so it is virtually 0 width */
}

和

<body><!-- this can be a <p> container or else -->
<img src="http://lorempixel.com/50/100/" />
<img src="http://lorempixel.com/100/50/" />
</body>

http://codepen.io/gc-nomade/pen/rkwGj

只要你知道它的宽度，这适用于任何内联框

【讨论】：