将一个图像居中，并将另一个图像右对齐

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;

和上。列：

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;
 }