Achieving a centered layout for a div containing two photos that overlap on a mobile screen resolution

Question

Achieving a centered layout for a div containing two photos that overlap on a mobile screen resolution

I attempted to center a div containing 2 photos perfectly in the center, but encountered some issues. Despite trying various positioning techniques such as display: flex, align-items, justify-content, and more, I couldn't get the image container to move to the center.

Below is my code:

.grid {
  display: grid;
  gap: 1.5rem;
}

.section {
  padding: 4.5rem 0 2rem;
}

.home_container {
  position: relative;
  align-items: center;
  justify-content: center;
}

.home_images {
  position: absolute;
  display: flex;
  left: 50%;
  top: 50%;
}

.home_big-img {
  z-index: 12;
}

.home_small-img {
  transform: translateX(-9rem);
}

<section class="section home grid">
  <div class="home_container container">
    <div class="home_images">
      <img src="./img/man.png" alt="" class="home_big-img">
      <img src="./img/plane.png" alt="" class="home_small-img">
    </div>
  </div>
</section>

One of the images can be viewed here:

https://i.sstatic.net/yh2Ld.png

The second image can be found here:

https://i.sstatic.net/zTRNN.png

html css image overlay

Answer 1

Answer №1

If you want to center child elements (such as images) within a parent element, follow these steps:

Ensure your parent element has the correct width and height
Add position: relative, display: flex, align-items: center, and justify-content: center to your parent element (.home-images in this case)
Use position: absolute for your child elements

section {
  width: 200px;
  height: 200px;
}

.container {
  width: 100%;
  height: 100%;
}

.images {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.big-img {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: red;
}

.small-img {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: blue;
}

<section class="home">
  <div class="container">
    <div class="images">
      <img class="big-img"/>
      <img class="small-img"/>
    </div>
  </div>
</section>

Wishing you a wonderful day ahead!

Answer 2

If you want to center child elements (such as images) within a parent element, follow these steps:

Ensure your parent element has the correct width and height
Add position: relative, display: flex, align-items: center, and justify-content: center to your parent element (.home-images in this case)
Use position: absolute for your child elements

section {
  width: 200px;
  height: 200px;
}

.container {
  width: 100%;
  height: 100%;
}

.images {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.big-img {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: red;
}

.small-img {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: blue;
}

<section class="home">
  <div class="container">
    <div class="images">
      <img class="big-img"/>
      <img class="small-img"/>
    </div>
  </div>
</section>

Wishing you a wonderful day ahead!

Answer 3

Answer №2

Do you think this will be beneficial?

.home_images{
  position: absolute;
  display: flex;
  left: 50%;
  transform: translateX(-50%);
}

If you want to vertically center it, try using translateY instead of translateX, and top: 50% instead of left: 50%

Answer 4

Do you think this will be beneficial?

.home_images{
  position: absolute;
  display: flex;
  left: 50%;
  transform: translateX(-50%);
}

If you want to vertically center it, try using translateY instead of translateX, and top: 50% instead of left: 50%

Answer 5

Answer №3

.grid {
  display: grid;
  gap: 1.5rem;
}

.section {
  padding: 4.5rem 0 2rem;
}

.home_container {
  position: relative;
  align-items: center;
  justify-content: center;
}

.home_images {
  position: absolute;
  display: flex;
  left: 50%;
  top: 50%;
}

.home_big-img {
  z-index: 12;
}

.home_small-img {
  transform: translateX(-9rem);
}

<section class="section home grid">
  <div class="home_container container">
    <div class="home_images">
      <img src="./img/man.png" alt="" class="home_big-img">
      <img src="./img/plane.png" alt="" class="home_small-img">
    </div>
  </div>
</section>

Answer 6

.grid {
  display: grid;
  gap: 1.5rem;
}

.section {
  padding: 4.5rem 0 2rem;
}

.home_container {
  position: relative;
  align-items: center;
  justify-content: center;
}

.home_images {
  position: absolute;
  display: flex;
  left: 50%;
  top: 50%;
}

.home_big-img {
  z-index: 12;
}

.home_small-img {
  transform: translateX(-9rem);
}

<section class="section home grid">
  <div class="home_container container">
    <div class="home_images">
      <img src="./img/man.png" alt="" class="home_big-img">
      <img src="./img/plane.png" alt="" class="home_small-img">
    </div>
  </div>
</section>

Answer 7

Answer №4

To align the images in the center, you can utilize flexbox properties.

.grid {
  display: grid;
  gap: 1.5rem;
}
    
.section {
  padding: 4.5rem 0 2rem;
}
    
.home_container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
    
.home_images {
  display: flex;
  align-items: center;
  justify-content: center;
}
    
.home_big-img {
  z-index: 12;
}

.home_small-img {
  transform: translateX(-9rem);
}

In the updated code, I replaced the position: absolute with display: flex, align-items: center, and justify-content: center in the .home_container class to centralize the entire image container on the screen. Additionally, I adjusted the height of the container to 100vh to ensure it fills the entire viewport height.

After saving these modifications, the images will be effectively centered on mobile screens.

Answer 8

To align the images in the center, you can utilize flexbox properties.

.grid {
  display: grid;
  gap: 1.5rem;
}
    
.section {
  padding: 4.5rem 0 2rem;
}
    
.home_container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
    
.home_images {
  display: flex;
  align-items: center;
  justify-content: center;
}
    
.home_big-img {
  z-index: 12;
}

.home_small-img {
  transform: translateX(-9rem);
}

In the updated code, I replaced the position: absolute with display: flex, align-items: center, and justify-content: center in the .home_container class to centralize the entire image container on the screen. Additionally, I adjusted the height of the container to 100vh to ensure it fills the entire viewport height.

After saving these modifications, the images will be effectively centered on mobile screens.

Achieving a centered layout for a div containing two photos that overlap on a mobile screen resolution

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Using HTML and CSS to create a line break between div elements

Displaying Image Previews in Rails View Using JavaScript

Iframe form submissions

Incorrect legend colors in Highcharts pie chart

Troubleshooting the issue: Unable to shift a div to the left in a Rails app using jQuery and CSS when a mouseover event occurs

What steps should I take to address the issue of sanitizing a potentially harmful URL value that contains a

Having trouble installing $ npm i mini-css-extract-plugin. Any ideas on what might be causing the issue?

What is the best way to style odd and even divs in CSS?

Strange behavior observed while attempting to create a smooth CSS transition effect from the right side

Display web content using ASP.NET Razor cshtml files

Ignored CSS Style Class

Creating a Shadow Effect on CSS Triangles

The act of sorting an item in jQuery triggers a reordering of items

Placing an object to the right side

Confirm that only the days of the present month are eligible for selection

Is there a skilled coder available to troubleshoot this carousel's HTML code?

Switch background color multiple times on click using JavaScript loop

Taking data input from three textboxes and storing them in a PHP array

Having trouble displaying an image on a subpage in HTML

What is the method for compressing text in CSS?