对齐元素旁边的一个中心元素

我想要的图像放置到第二，居中的图像的右侧像这样：对齐元素旁边的一个中心元素

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

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

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

2014-01-26 Legomaniack

将是很大的帮助为你做一个http：/ /jsfiddle.net并与我们分享 –

您可以虚拟地将第二幅图像的宽度减小到零，并具有负边距。

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宽度

来源

2014-01-26 22:06:18

对齐元素旁边的一个中心元素

回答

相关问题