Position the DIV in the center within another DIV that contains an image

Question

Position the DIV in the center within another DIV that contains an image

Having trouble centering a DIV horizontally inside another DIV that contains an image? It can be tricky, especially when the image is added into the mix.

I've attempted various methods, but my goal is to have box2 centered at the bottom of the parent DIV, on top of the image, regardless of its size.

You can take a look at an example image here:

Any suggestions or advice on how to achieve this?

For reference, here is the CSS and HTML code I've been working with:

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

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

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

html css

Answer 1

Answer №1

Give this a try: I removed the width from the outer div (setting both can cause the image size to vary). Instead, set the image height to 100%. Choose only one - height or width - and the other will automatically adjust to maintain the image ratio. Lastly, I positioned the bottom div absolutely with bottom set to 0, and left and right set to 0, then used margin:auto to center it.

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

Answer 2

Give this a try: I removed the width from the outer div (setting both can cause the image size to vary). Instead, set the image height to 100%. Choose only one - height or width - and the other will automatically adjust to maintain the image ratio. Lastly, I positioned the bottom div absolutely with bottom set to 0, and left and right set to 0, then used margin:auto to center it.

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

Answer 3

Answer №2

Since box1 served as the outer box, you have the option to include the text-align property so that #box2 can inherit from it. Additionally, if your images were larger than 200px, you could adjust the width to 239px; Check out the demo

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

}

#box2{
   background-color: yellow;  
}

Alternatively, you could also set the width to 200px for the image

View the updated demo here

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

}

#box1 img{
 width:200px   
}


#box2{
   background-color: yellow;  
}

Answer 4

Since box1 served as the outer box, you have the option to include the text-align property so that #box2 can inherit from it. Additionally, if your images were larger than 200px, you could adjust the width to 239px; Check out the demo

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

}

#box2{
   background-color: yellow;  
}

Alternatively, you could also set the width to 200px for the image

View the updated demo here

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

}

#box1 img{
 width:200px   
}


#box2{
   background-color: yellow;  
}

Answer 5

Answer №3

Check out the Live Demo

Give this a try

Here's the HTML code

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

</div>

And here's the CSS code

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

Answer 6

Check out the Live Demo

Give this a try

Here's the HTML code

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

</div>

And here's the CSS code

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

Answer 7

Answer №4

Do you find this solution helpful?

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

See it in action: https://jsfiddle.net/ba5z1zm3/2/

Answer 8

Do you find this solution helpful?

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

See it in action: https://jsfiddle.net/ba5z1zm3/2/

Position the DIV in the center within another DIV that contains an image

Answer №1

Answer №2

Answer №3

Check out the Live Demo

Answer №4

Similar questions

Material-UI: Eliminate the missingOppositeContent:before element from TimelineItem

Conceal image and substitute with a different image using JavaScript

Generating an interactive Datepicker using Jquery

Making adjustments to a Jquery data attribute can have a direct impact on CSS

Position a form in the center of a container and showcase an additional div on the right with an indentation

Customizing Sass Bootstrap Variables for Tailored Responsive Designs (Specifically for Mobile or Desktop)

Tips for Organizing a Vast Array of Repetitive "Nth-Of-Type" CSS Selectors

The CSS is getting overridden by the a:-webkit-any-link user agent stylesheet

Curious about the distinction between express-ejs-layouts and DHTML?

Send the user to the login page

pattern to eliminate particular anchor elements

tips for creating a mobile-friendly responsive button

The font-weight property appears to be ineffective across all browsers

Steps to display text in a div upon clicking on an image

Automatically trigger a PHP reload/refresh based on user input

I am currently working on a website that offers different themes, and I am attempting to update the iframe to reflect the selected theme on the site

Is there a notable distinction when utilizing http for referencing assets?

How can I style the inner div by adding a class to the first div?

Display user input within a modal dialogue box

Is there a method to ensure equal alignment of the <div class="card"> elements in Bootstrap?