對齊元素旁邊的一箇中心元素

我想要的圖像放置到第二，居中的圖像的右側像這樣：對齊元素旁邊的一箇中心元素

|..........{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

對齊元素旁邊的一箇中心元素

回答

相關問題