Question 219895 in Html Question posted in
Some basic documentation can be found here.

Html – How to center a div with 2 photos ,one covering another in mobile screen resolution

I tried to center a div with 2 photos exactly in the center. However it didn’t go well. Tried different types of positioning, display flex, align items justify content, etc, nothing allows me to
move image container to the center.

Here 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>

Here is first image:

enter image description here

And here is second one:

enter image description here

Tags:

3

Answers


  1. 0

    Will this help?

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

}

    In case you want to make it vertically center, use translateY instead of translateX and top: 50% instead of left: 50%

    Login or Signup to reply.
  2. 0

    To center the images, you can use flexbox.

    .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 modified code, I removed the position: absolute from the .home_images class and replaced it with display: flex, align-items: center, and justify-content: center in the .home_container class to center the entire image container on the screen. I also set the height of the container to 100vh to make sure it takes up the full viewport height.

    Save the changes, and the images should now be centered on the mobile screen resolution.

    Login or Signup to reply.
  3. 0

    To center child elements (img in your case) in a parent element, you should:

    1. Give your parent element a correct width and height
    2. Apply position: relative, display: flex, align-items: center and justify-content: center to your parent element (.home-images in your case)
    3. Apply position: absolute to 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>

    Have a good day!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search