Question

这边的新人。我已经搜索过，发现了类似的问题但不完全是我追求的问题。

我只想知道如何在div中水平居中图像，还要将图像放在div的底部（从底部开始精确到20px左右）。

我可以通过将容器div设置为position:relative，将图像position:absolute设置为bottom:30px和margin-left: 49%来获得我的样子。我只是更确切地说，而不是使用左边距。容器需要与页面上的其他元素相对。

任何帮助将不胜感激。感谢。

Answer 1

将绝对图像置于相对div内部

div > img {
  left: 50%;
  transform: translateX(-50%);
}

Answer 2

水平居中和垂直底部div Click here

.parent {
  position: relative;
}

.img {
  width: 50px;
  height: 50px;
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 0;
}

Answer 3

或者，您可以将left / right设置为零并将左/右margin设置为auto：

.box {
  position: relative;
}

.box img {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2em;
  margin: 0 auto;
}

演示：https://jsfiddle.net/ffyof90e/

说明：Why does "position: absolute; left: 0; right: 0; width: XYpx; margin: 0 auto" actually center?

Answer 4

这样做，例如：

<div id="divid">
<img src="http://pbs.twimg.com/profile_images/2284174872/7df3h38zabcvjylnyfe3_normal.png" alt="Smiley face" height="42" width="42">
</div>

您现在可以像这样应用css：

div > img {
   display:block;
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  margin:auto;

}

#divid{
  position: relative;
    height: 300px;
    width: 300px;
   border: 3px solid #73AD21;
}

您可以在https://jsfiddle.net/n4528wxz/1/

查看

div中的水平中心和底部位置图像

4 个答案: