CSS positioning of off-center image

Question

I need to center the mobile phone. Here is what is included in the mockup:

However, this is what I'm getting:

How can I position/center the mobile image so that the shadow doesn't push the phone to the right? I'm using display: flex;

HTML

<div class="image">
        <img src="<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/assets/images/landing-page/mobile-image-1.jpg" alt="">
        <img src="<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/assets/images/landing-page/mobile-image-2.jpg" alt="">
        <div class="middle-image">
             <img class="middle-image-mobile" src="<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/assets/images/landing-page/mobile-image.png" alt="">
        </div>
        <img src="<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/assets/images/landing-page/mobile-image-3.jpg" alt="">
        <img src="<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/assets/images/landing-page/mobile-image-4.jpg" alt="">
</div>

CSS

& .image {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-around;


        & > img {
            border-radius: var(--theme-border-radius);
            flex-grow: 1;
            height: 100%;
            width: 13%;
        }
}

Could you please add more code? Some `HTML` and `CSS` would be appreciated. It will be easier for us to help you out. — Jakub A Suplicki, Jun 17 '20 at 02:22
Thanks for adding the code. So it seems to me that the shadow is not a `CSS` property but it comes with an image. — Jakub A Suplicki, Jun 17 '20 at 02:28
I believe that one of the fastest and safest ways to achieve what you want would be to edit the picture and for example, make it wider so that you have more white space on the right side. In general, your `CSS` seems fine and you centered the picture correctly. It is just that picture of the phone gives you a visual effect of being pushed because of the shadow that comes with it. Another alternative would be to cut the image of a phone itself (without a shadow) and add shadow with `CSS` property. — Jakub A Suplicki, Jun 17 '20 at 02:33
Adding more white space on the right puts too much space between the phone and the other images in the squares. — Michelle M., Jun 17 '20 at 02:41
Yes, that is correct, to fix that, you could use negative margins, for example. — Jakub A Suplicki, Jun 17 '20 at 02:43
Did my answer fix your issue or do you still need some help? — Jakub A Suplicki, Jun 17 '20 at 07:31
Still need some help. Adjusting the margins doesn't seem like the cleanest way to go about it as it causes other alignment issues. I wonder if there's a solution that involves adjusting the width and height of the container and overflowing the shadow? — Michelle M., Jun 17 '20 at 13:12
I see. If you are ok with adjusting width and height and made it look fairly similar to the actual design. I believe that using margins, in this case, is a decent way to achieve what you need. Setting an absolute position, (one alternative) to the central image would cause many more issues when it comes to items around it. Note that I assumed your phone picture is in the middle of the picture and used paddings on the central image to demonstrate that, with the overflowing effect of surrounding items. Let me know if there is something missing, please. — Jakub A Suplicki, Jun 17 '20 at 20:27

Jakub A Suplicki · Accepted Answer · 2020-06-17T20:21:38.920

Have a look, please. I tried to create something similar. That is with the assumption that you have added white space to the picture so that the image together with the shadow looks centered.

.wrapper {
 display: flex;
 justify-content: space-around;
 border: 5px solid gray;
 width: 650px;
 height: 300px;
 margin: auto;
}
.blocks {
 position: relative;
 width: 13%;
 height: 100px;
 background-color: #d5d5d5;
 margin: 10px;
}
.blocks:not(:nth-child(3)) {
  border-radius: 10px;
  box-shadow: 0 3px 12px -6px black;
  border: 5px solid white;
}
.blocks:nth-child(2), .blocks:nth-child(4) {
 top: 100px;
}
.blocks:nth-child(1), .blocks:nth-child(5) {
 height: 150px;
}
.center {
 position: relative;
 z-index: -1;
 top: 10px;
 display: block;
 margin-left: -30px;
 margin-right: -30px;
 width: 150px;
 height: 250px;
 border-right: 30px solid #9696d8;
 border-left: 30px solid #9696d8;
}

<div class="wrapper">
  <div class="blocks"></div>
  <div class="blocks"></div>
  <div class="blocks center"></div>
  <div class="blocks"></div>
  <div class="blocks"></div>
</div>

You can see I used negative margins to bring elements closer to the element that is in the center. If you wanted to deal with the overlaying images then you would add z-index depending on what needs to be in front.

Hope it helps.

CSS positioning of off-center image

1 Answers1