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:

The second image can be found here:

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

The draggable() function in jQuery and the ng-repeat directive in Angular make for a powerful combination

As soon as I hit the submit button on my website form, the URL is automatically refreshed with the information I provided

Tips for refreshing the <img> tag using a user image

Challenges arise when creating responsive map regions in Vue 3

Obtain the text content of a div using JavaScript

Creating input fields similar to the Mail app on OSX

Having trouble inserting a new row into the AngularJS table?

Set the navigation height to fill the entire screen

Struggling to properly implement background images in a React application using Tailwind CSS

5 Ways to Incorporate Font Awesome Icons into CSS Pseudo Elements

"Customize your WordPress theme by moving the sidebar from left to right for

Using Rails to reference an image in CSS

The Selenium web driver encounters difficulty in clicking a button if the element is both visible and clickable, resulting in the throwing of the org.openqa.selenium.ElementNotInter

Is there a way to locate a file by inputting a partial name?

What might be causing the sticky footer to malfunction on the Samsung Galaxy Note 2's default browser?

"Enhance your website with a creative CSS3 effect: rotating backgrounds on

The webpage is not displaying any results despite using .innerHTML with Ajax

Tips for eliminating double quotes from an input string

Tips for updating the appearance of material-ui table pagination

Interactive text animation triggered by a click