在同一行中居中一個圖像並右對齊另一個圖像

Question

在下面的代碼中，我希望在整個頁面中心位置爲logo.jpg，並且在同一行中右對齊shopping_cart.jpg。當前設置的問題是右側的圖像會導致中央的圖像略微向左移動。

我正在使用Skeleton CSS Boilerplate，並且我不想將這兩個圖像放在不同的div中，因爲爲了在移動視圖中進行響應，中心對齊的圖像將出現在頂部，而右側對齊的圖像將出現在它下面（我希望它們在移動視圖中繼續出現在一行中）。

<div class="container" style="text-align:center"> 
    <div class="row"> 
     <div class="column"> 

      <img width="50%" src="images/logo.jpg"> 

      <img width="5%" src="images/shopping_cart.jpg" style="float:right"> 

     </div> 
    </div> 
</div> 

那麼，有沒有一些方法來中心logo.jpg整個頁面，就在同一行對齊shopping_cart.jpg，這樣logo.jpg不向左稍微移動，因爲shopping_cart.jpg存在？

Answer 1

，而不是浮動權，嘗試

position: absolute; and right: 0; 

和.COLUMN：

position: relative; 

Answer 2

我認爲這會做的伎倆。複製並粘貼:)

CSS：

.column { 
position: relative; 
overflow: hidden; 
} 

.column img:nth-of-type(1) { 
position: absolute; 
top:0; 
left: 50%; 
} 

.column img:nth-of-type(2) { 
position: absolute; 
top:0; 
right: 0; 
}