将一个图像居中,然后将另一个图像右对齐,在同一行中

时间:2015-12-31 08:59:36

标签: css skeleton-css-boilerplate

在下面的代码中,我想在整个页面中居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

2 个答案:

答案 0 :(得分:4)

而不是向右浮动,请尝试

position: absolute; and right: 0;

和.column:

position: relative;

答案 1 :(得分:1)

我认为这样做会有所帮助。复制并粘贴:)

CSS:

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" />

<table class="table table-striped"  id="tab_logic">
  <thead>
    <tr>
      <td colspan="7">
        <a id="add_row" class="btn btn-success btn-sm pull-left">Add Row</a><a id="delete_row" class="pull-right btn btn-danger btn-sm">Delete Row</a>
      </td>
    </tr>
    <tr class="success">
      <th class="text-center">No.</th>
      <th class="text-center">Start Date</th>
    </tr>
  </thead>
  <tbody >
    <tr id='addr0' class="itemsGroup">
      <td align="right">1
      </td>
      <input type="hidden" name="counter" id="counter" value=1> 
      <td class="col-xs-8">
        <input type="text" name="harga_start_date[]" id="harga_start_date[]" class="datepick form-control" >
      </td>
    </tr>
    <tr id='addr1'></tr>
</table>