Center my div over my other div

Hi I am having issues with center alignment.
Here is my code:
<style>
.container{
	    margin: 0 auto; 
	background-color: #F1F1F1;  
} 
.Photo {
  width: 100%;
}
.photo_div{
	    height: 500px;
     position: absolute; 
    display: inline-flex;
}
.Background {
     width: 1340px;
    height: 1349px;
    background-color: #ffffff;
    position: absolute;
	    margin-top: 450px;
	display: inline-block

}
</style>
<body>
<div class="container">
<div class="photo_div">
<img src ="assets/images/meals/soup_home.jpg" class="Photo"> 
</div>
<center>
<div class="Background" >

</div>
</center>
</div>

</body>

Open in new window


I tried everything from center to align text to align contents, i dont know what to do anymore.see.pngThis is how it looks like now.
LVL 1
Jazzy 1012Asked:
Who is Participating?
 
Julian HansenConnect With a Mentor Commented:
It would be really useful if you told us which div was which - because the code you posted does not produce the result in the image.

Assuming that it is the .photo_div you want to center then do this

.photo_div{
	height: 500px;
	position: absolute; 
	display: inline-flex;
	left: 50%;
	transform: translateX(-50%);
}

Open in new window

However you are using the deprecated <center> tag around the Background div so maybe you want to center that one - but that also does not make sense because that would mean the background div is the Photo_div which has a height of 500px in your code and the image you posted does not seem to show the background image as having a height 500 - so I am confused.

Can you clear the waters a bit here?
0
 
Alan WarrenConnect With a Mentor Applications DeveloperCommented:
You should be able to center your image both vertically and horizontally, you can change the size of '.centre' container to suit.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style>
    .center { height: 200px;position: relative;border: 3px solid green; }
    .center img {margin: 0;position: absolute;top: 50%;left: 50%;-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
  </style>
</head>
<body>
  <div class="center">
      <img src="img/ant.png" alt="I am vertically and horizontally centered." />
  </div>
</body>
</html>

Open in new window

snapshot of centered image
0
 
Jazzy 1012Author Commented:
it is the background div, sorry I thought it was noticeable from the photo how the white div is to the left and there was alot of space to the right.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.