Question

我正在努力实现这样的目标：

                           [CENTER IMAGE]             [RIGHT IMAGE]

以下是我的意思的图片示例：http://prntscr.com/a9vuxv

我已应用以下代码，但它将两个图像放在右边，我的目标是将一个图像放在中间，一个放在右边：

<div style="width: 100%;">
  <div style="float: right;">
    <img src="centerimage.png" />
  </div>
  <div style="float: right;">
    <img src="rightimage.png" />
  </div>
</div>

Answer 1

您可以使用display: inline-block和text-align: center。

<div style="width: 100%; text-align: center; position: relative;">
  <div style="display: inline-block;">
    <img src="http://bit.ly/1UwB3sP" />
  </div>
  <div style="position: absolute; right: 0; top: 0">
    <img src="http://bit.ly/1UwB3sP" />
  </div>
</div>

Answer 2

流中的任何元素都会影响中心图像/ div的边距或对齐方式。因此，我们需要从文档流中删除元素并使用绝对定位。

然后中心元素可以按照任何常规方法居中...在这里我删除所有浮点数，使用inline-block / text align:center使中间图像/ div居中并且绝对定位右图像/ div。

＆＃13;

.parent {
  text-align: center;
  position: relative;
}
.center {
  display: inline-block;
  background: red;
}
.right {
  position: absolute;
  top: 0;
  right: 0;
  background: pink;
}

＆＃13;

<div class="parent">
  <div class="center">
    Some Image Centered
  </div>
  <div class="right">
    some image right
  </div>
</div>

＆＃13;

注意：当然，您可以浮动/对齐右侧div /图像并绝对定位中心div / image ....这是一个选择。

Answer 3

将容器div设置为text-align: center;并将右侧元素设置为绝对右侧。

＆＃13;

.container{
  text-align: center;
}

.right{
  position: absolute;
  right: 0;
}

＆＃13;

<div class="container">
  <img class="center" src="http://i.stack.imgur.com/e4z3K.jpg">
  <img class="right" src="http://i.stack.imgur.com/T5KPW.jpg">
</div>

＆＃13;

Answer 4

这是解决方案。

.right{
  float: right;
}
.center{
  overflow: hidden;
}
.center img{
  display: block;
  margin: 0 auto;
}

<div style="width: 100%;">
  <div  class="right">
<img src="http://lorempixel.com/150/150/nature/" />
  </div>
  
  <div  class="center">
<img src="http://lorempixel.com/150/150/nature/" />
  </div>
</div>

Answer 5

＆＃13;

.center{
  display: block;
  margin: auto;
  }

＆＃13;

<div style="width: 100%;">
<div style="float: right;">
<img src="centerimage.png" width="100" height="100"/>
</div>
<img class="center" src="rightimage.png" width="100" height="100" />
</div>

＆＃13;

删除浮动：在中心图像中右侧并添加以下规则：

margin: auto;
display: block;

将一个图像对准中央，一个对齐右侧

5 个答案: