将一张图片居中，右对齐另一张，在同一行

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

将一张图片居中，右对齐另一张，在同一行

center one image, and right align another, in the same line

css

skeleton-css-boilerplate