非中心图像的CSS定位

Question

我要把手机调到中心。下面是模型中包含的内容：

​

然而，这是我得到的：

​

我如何定位/居中移动图像，这样阴影就不会把手机推到右边？我用的是display: flex;

<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%;
        }
}

Answer 1

请看一下。我试着创造出类似的东西。这是假设您已经在图片中添加了空白，使得图像与阴影一起看起来是居中的。

​

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

​

您可以看到，我使用了负边距来使元素更接近中心的元素。如果您想处理叠加图像，那么您将添加z-index，这取决于前面需要的是什么。

希望能帮上忙。