Center DIV inside DIV with image

Question

I'm trying to horizontally center a DIV inside another DIV that has an image in it. I can get it to work with just a parent\child DIV, but as soon as I add the image things go crazy.

This is what I've tried. Ideally I would like box2 to be centered at the bottom of the outer DIV\image, but on TOP of the image, regardless of what size image is used.

see for example http://i60.tinypic.com/mbmqzr.jpg

Suggestions?

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>

I guess I should clarify what I mean, the DIV needs to be on top of the image. see edit — David Angel, Apr 05 '15 at 17:46
Here are two simple methods to center divs within divs, vertically, horizontally or both (pure CSS): http://stackoverflow.com/a/31977476/3597276 — Michael Benjamin, Aug 20 '15 at 15:24

score 1 · Answer 1 · answered Apr 18 '15 at 05:23

Try this. All I did was take out the width on the outer div (if you set both, you end up with a size that can vary for the img). Then set img to height 100%. Don't set both...only one and the other will follow keeping ratio of the img. Then finally for the bottom div I just placed it absolute with a bottom of 0 and right an d left 0 and then margin auto to make it center

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;
}

score 0 · Answer 2 · answered Apr 04 '15 at 03:21

Because box1 was the outer box you could add the text-align property so that #box2 will inherit from it. Also your images was bigger than the 200px; You could change the width for 239px; jsfiddle

#box1{
    position:relative;
    display:inline-block;
    width: 239px;
    height: 200px;
    text-align:center;

}

#box2{
   background-color: yellow;  
}

or you could set the width to 200px for the image

jsfiddle

#box1{
    position:relative;
    display:inline-block;
    height: 200px;
    text-align:center;

}

#box1 img{
 width:200px   
}


#box2{
   background-color: yellow;  
}

Alupotha · Answer 3 · 2015-04-04T03:33:44.817

0

Live Demo

Try this

html

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

</div>

css

#box1{
    position:relative;
    display:inline-block;
    width: auto;
    height: 200px;
    background-color:#fff;

}

#box2{
   width:50px;
   text-align:center;
   position:relative;
   bottom:0%;
   float:bottom;
   margin: 0 auto;
   background-color: yellow;  
}

edited Apr 04 '15 at 03:33

answered Apr 04 '15 at 03:28

Alupotha

9,710
4
47
48

score 0 · Answer 4 · answered Apr 04 '15 at 15:05

Is this a solution for you?

#box1 {
    position:relative;
    display:table;
    width: 200px;
    height: 200px;
}

img {
    position: absolute;
    z-index: -2;
    width: 100%;
}

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

working example: https://jsfiddle.net/ba5z1zm3/2/

Center DIV inside DIV with image

4 Answers4

Live Demo