Question

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

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

关于如何使用margin: auto;或<center>来居中图片的所有答案，导致Image2在Image1下方发送，或者在text-align: center;周围发送，我无法将其置于中心图像。

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

Answer 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

只要您知道它的宽度

，这适用于任何内联boxe

对齐居中元素旁边的元素

1 个答案: