CODEWITHSUNDEEP
htmlcss
David Angel
David Angel

Reputation: 1

Center DIV inside DIV with image

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>

Upvotes: 0

Views: 2034

Answers (4)

carinlynchin
carinlynchin

Reputation: 389

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

Upvotes: 1

prompteus
prompteus

Reputation: 1032

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/

Upvotes: 0

Alupotha
Alupotha

Reputation: 10093

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

Upvotes: 0

Papouche Guinslyzinho
Papouche Guinslyzinho

Reputation: 5448

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

Upvotes: 0

Related Questions