如何将我的图像底部定位在已经绝对定位的 div 中？

Question

这是我的html代码：

<div class="icon" style="height: 85px; position: relative;">
<img src="images/image.png">
</div>

.CSS：

   .sol-add-section {
            width: 160px; 
            float: left;
            margin: 20px 50px 0px 0px;
    }
     .image { max-width: 160px; 
              max-height:85px;
              position: absolute;
              bottom:5px; 
              margin-left:10px;
    }
    .icon {
    .sol-add-section image {
     display: block;
    }

如您所见，div 是位置：相对，图像是position: absolute 。

我可以在不添加margin-right等的情况下使此图像居中，即 margin-right: auto; margin-left: auto（我已经试过了）。

Answer 1

在你的

css增加价值

.icon .img {
position :relative;
left:(your value);
right:(your value);
top:(your value);
bottom:(your value);
}

Answer 2

您可以使用

text-align：center;with：

a） 绝对：定位和负边距等于图像宽度的一半：

<div class="icon" style="height: 85px; position: relative;text-align:center;background:gray">
  <img src="http://lorempixel.com/100/80/people/1" style="position:absolute;bottom:0;margin-left:-50px;   ">
</div>

b） 在流量中，线高和垂直对齐：

<div class="icon" style="height: 85px; line-height:85px;text-align:center;background:gray">
  <img src="http://lorempixel.com/100/50/people/1" style="vertical-align:bottom;   ">
</div>

在此处查看实际代码：http://codepen.io/anon/pen/dbmFv