将一张图片居中对齐，另一张在右侧对齐答案

【问题标题】：Align one image in center and one on right将一张图片居中对齐，另一张在右侧对齐
【发布时间】：2016-06-14 04:21:56
【问题描述】：

我正在尝试实现这样的目标：

                           [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>

【问题讨论】：

我会选择使用弹性盒子。
Flexbox 也做不到。
那么，您希望中心图像相对于整个页面宽度居中还是相对于右侧图像未占用的空间居中？您的文本版本似乎暗示第一个，但您的链接图像指向后者。
你可以使用弹性盒子。请参阅此处的框 62-76：stackoverflow.com/a/33856609/3597276
还有：How to center-align a flex item and right-align another using Flexbox

标签： html css

【解决方案1】：

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

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

去掉中间图片中的float:right并添加如下规则：

margin: auto;
display: block;

【讨论】：

中心图像实际上没有居中...它受右边的div影响。
它可能是一个更好的计划，将 el 完全从流中拉出，使用绝对定位，但如果 imgs 的大小合适，左浮动会相当好。这个答案不应该被否决。

【解决方案2】：

您可以使用 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>

【讨论】：

【解决方案3】：

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

然后可以通过任何常用方法将中心元素居中...这里我删除所有浮动，使用inline-block / text align:center 将中间图像/div 居中并绝对定位正确的图像/div。

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

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

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

【讨论】：

【解决方案4】：

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

.container{
  text-align: center;
}

.right{
  position: absolute;
  right: 0;
}

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

【讨论】：

【解决方案5】：

这是解决方案。

.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>

【讨论】：