对齐图像左上角、中心和右下角答案

【问题标题】：Aligning images top-left, center, and bottom-right对齐图像左上角、中心和右下角
【发布时间】：2017-05-13 11:20:14
【问题描述】：

我想将图像放置在如图所示的 div 中。一个应该与左上角对齐，一个与中心对齐，一个与右下角对齐。宽度和间隙也需要根据窗口大小调整大小。实现这一目标的最佳方法是什么？

【问题讨论】：

向我们展示您目前尝试过的代码。

【解决方案1】：

只需使用位置样式即可。

<style type="text/css">
  div {
    width: 100%;
    height: 200px;
    position: relative;
  }
  #img1 {
    position: absolute;
    top: 0;
    left: 0;
  }
  #img2 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
  #img3 {
    position: absolute;
    bottom: 0;
    right: 0;
  }
</style>

<div>
  <img id ="img1" src="http://lorempixel.com/200/100/">
  <img id ="img2" src="http://lorempixel.com/200/100/">
  <img id ="img3" src="http://lorempixel.com/200/100/">
</div>

【讨论】：

您也可以使用:first-child 和:last-child 定位图像。
后续小问题——我们运行这段代码的时候，为什么div的高度是0？
因为内容的位置是绝对的。
@SeanDKim 没有指定 div 的大小，它的高度刚好足以包含其中的元素。但是，绝对定位的元素不占用任何空间。 div 中的所有图像都是绝对定位的，里面没有其他内容。
我从这个答案中学到了一些新东西。我真的以为如果设置顶部、底部、左侧和右侧，图像会像其他元素一样被拉伸（codepen.io/VAggrippino/pen/mONWvr）。这也让我有点困惑。这些值都没有真正得到尊重，但是没有它们，边距设置就不起作用。

【解决方案2】：

您应该position: absolute 与视口相关的所有图像。

这就是你要找的东西：

html {
  height: 100%;
}
body {
  height: 100%;
  width: 100%;
  position: relative;
}
img {
  width: 40px;
}
.first {
  position: absolute;
  top: 0;
  left: 0;
}
.second {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  text-align: center;
}
.third {
  position: absolute;
  bottom: 0;
  right: 0;
}

<body>
  <img class="first" src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" />
  <img class="second" src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" />
  <img class="third" src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" />

</body>

【讨论】：

【解决方案3】：

我会推荐一种不同的方法... Flexbox！这要容易得多，但它是一个较新的 CSS 功能。

Flexbox 的 CSS 技巧指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

CanIUse 上的 Flexbox 支持表：http://caniuse.com/#search=flex

现在，该解决方案似乎在 Firefox 和 Chrome 的 CodePen (http://codepen.io/VAggrippino/pen/rWXjbY) 上运行良好，但由于某种原因，它在 SO 上的“运行代码 sn-p”窗口中中断。希望这只是一个问题。

更新：它只适用于 CodePen。大多数这些游乐场（CodePen 除外）在我的代码之后将代码注入到文档中。 img:last-child 不匹配任何内容，因为 body 的最后一个孩子是 <script> 块。无论如何，以这种方式使用body 元素作为容器可能是不好的做法。现在已修复此问题，应该可以在任何地方使用。

html, body {
  height: 100%;
}

body {
  margin: 0;
}

.container {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

img {
  max-width: 33%;
  max-height: 33%;
}

img:first-child {
  -ms-flex-item-align: start;
      align-self: flex-start;
}

img:last-child {
  -ms-flex-item-align: end;
      align-self: flex-end;
}

<div class="container">
  <img alt="cat1" src="http://lorempixel.com/200/200/cats/1">
<img alt="cat1" src="http://lorempixel.com/200/200/cats/2">
<img alt="cat1" src="http://lorempixel.com/200/200/cats/3">
  </div>

【讨论】：

我不认为你的最后一张图片放错了位置。
@aavrug 我马上就注意到了。我认为这是 SO 的一个特点，但我在 jsfiddle 和 cssdeck 上重新创建了。显然，它只适用于 CodePen。我认为仍然存在基于 flexbox 的解决方案，但我的代码中一定有错误。
添加align-self:flex-end 后似乎工作正常。
@aavrug 问题已解决。像我以前那样使用 body 元素作为 flexbox 容器并不是一个好主意。这些 playgrounds 中的大多数（CodePen 除外）在我的代码之后将代码附加到正文中。所以，这里没有匹配 img:last-child 最后一个子元素的元素，并且在 jsfiddle 和 cssdeck 上是一个 <script> 块。
是的，我正在解决，但后来我看到你更新了：P

【解决方案4】：

对于那些想要使用 Bootstrap 4 的人可以做到这一点：

align-self-*：控制指定弹性项目的垂直对齐方式。
img-fluid：让您的图片具有响应性。

.row {
  height: 30rem;
  border: .1rem red solid;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col align-self-start">
      <img class="img-fluid" src="http://placehold.it/200x250/ff9999&text=img1">
    </div>
    <div class="col align-self-center">
      <img class="img-fluid" src="http://placehold.it/200x250/ffb3b3&text=img2">
    </div>
    <div class="col align-self-end">
      <img class="img-fluid" src="http://placehold.it/200x250/ffcccc&text=img3">
    </div>
  </div>
</div>

【讨论】：