偏离中心图像的 CSS 定位答案

【问题标题】：CSS positioning of off-center image偏离中心图像的 CSS 定位
【发布时间】：2020-10-06 18:23:31
【问题描述】：

我需要让手机居中。以下是模型中包含的内容：

但是，这就是我得到的：

如何定位/居中移动图像，以便阴影不会将手机推向右侧？我正在使用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%;
        }
}

【问题讨论】：

您能添加更多代码吗？一些HTML 和CSS 将不胜感激。我们会更容易为您提供帮助。
感谢您添加代码。所以在我看来，阴影不是CSS 属性，而是带有图像。
是的，阴影包含在图像中。
我相信实现您想要的最快和最安全的方法之一是编辑图片，例如，使其更宽，以便您在右侧有更多的空白空间。一般来说，您的CSS 看起来不错，并且您正确地将图片居中。只是那张手机的画面给你一种被推的视觉效果，因为它自带的影子。另一种选择是剪切手机本身的图像（没有阴影）并使用CSS 属性添加阴影。
在右侧添加更多空白会使手机和正方形中的其他图像之间的空间过大。

标签： css sass flexbox object-fit

【解决方案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。

希望对你有帮助。

【讨论】：