CSS позиционирование нецентрального изображения - PullRequest
Новая
       64

CSS позиционирование нецентрального изображения

1 голос
/ 17 июня 2020

Мне нужно отцентрировать мобильный телефон. Вот что включено в макет: enter image description here

Однако вот что я получаю: enter image description here

Как Могу ли я расположить / отцентрировать мобильное изображение так, чтобы тень не направляла sh телефон вправо? Я использую 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%;
        }
}

1 Ответ

1 голос
/ 17 июня 2020

Посмотри, пожалуйста. Я пытался создать нечто подобное. Это при условии, что вы добавили к изображению пустое пространство, чтобы изображение вместе с тенью выглядело центрированным. 

.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 в зависимости от того, что должно быть впереди.

Надеюсь, это поможет.

...