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

Question

这里是新人。我已经搜索并发现了类似的问题，但不完全是我想要的。

我只是想知道如何在 div 中水平居中放置图像，同时将图像定位在 div 的底部（准确地说是距底部 20 像素左右） .

我可以通过将容器 div 设置为 position:relative 并将图像 position:absolute 设置为 bottom:30px 和 margin-left: 49%。我宁愿它是准确的，而不是使用左边距。容器需要与我在页面上的其他元素相关。

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

Answer 1

将绝对图像置于相对图像的中心 div

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

Answer 2

水平居中垂直底部divClick here

.parent {
  position: relative;
}

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

Answer 3

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

.box {
  position: relative;
}

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

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

解释：

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 中的水平居中和底部位置图像

Horizontally centre and bottom position image in a div

html

css

image

positioning