html - 居中 DIV inside DIV with image

Question

我正在尝试将一个 DIV 水平居中放置在另一个包含图像的 DIV 中。我可以让它与父\子 DIV 一起工作，但是一旦我添加图像，事情就会变得疯狂。

这是我试过的。理想情况下，我希望 box2 位于外部 DIV\image 的底部，但位于图像的顶部，无论使用什么尺寸的图像。

参见示例 http://i60.tinypic.com/mbmqzr.jpg

建议？

https://jsfiddle.net/uz0L5oow/2/

CSS

#box1{
    position:relative;
    display:inline-block;
    width: 200px;
    height: 200px;
}

#box2{
   width:50px;
   margin: 0 auto;
   background-color: yellow;  
}

HTML

<div id="box1">
<img src="http://i44.tinypic.com/2j4akqb.jpg"/> 
    <div id="box2">box</div>
</div>

Answer 1

试试这个。我所做的只是去掉外部 div 的宽度(如果同时设置两者，最终得到的尺寸可能因 img 而异)。然后将 img 设置为高度 100%。不要同时设置...只有一个和另一个将遵循 img 的保持比例。最后，对于底部的 div，我只是将其绝对放置，底部为 0，右边为 0，d 左边为 0，然后边距自动使其居中

https://jsfiddle.net/carinlynchin/uz0L5oow/10/

<div id="box1">
    <img src="http://i44.tinypic.com/2j4akqb.jpg"/>
    <div id="box2">box</div>
</div>

CSS:

#box1{
    position:relative;
    display:inline-block;
    height: 200px;
}

img {
    height: 100%;
}

#box2{
   width:50px;
   background-color: yellow;  
   position: absolute;
    bottom:0;left:0; right:0;
   margin:auto;
}