css - 偏离中心图像的 CSS 定位
问题描述
如何定位/居中移动图像,以便阴影不会将手机推到右侧?我正在使用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%;
}
}
解决方案
请看一看。我试图创造类似的东西。那是假设您已在图片中添加了空白区域,以便图像与阴影一起看起来居中。
.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
根据需要在前面添加什么。
希望能帮助到你。
推荐阅读
- swift - 调用 CellForRowAtIndexPath 后上传 TableView
- curl - 如何确认 curl_global_init() 已被调用?
- java - 有没有办法从不在同一个文件中的其他 Java 程序运行 Java 程序?
- php - 在刀片中使用 subDays() 后 URL 不会改变 - Laravel
- jetty - 是否可以使用两个端口运行具有单个连接器的 Jetty 服务器,一个使用相互身份验证,另一个不使用?
- java - 如何修复 Java 中的“Index 5 out of bound for length 5”错误
- conditional-statements - ModelMapper - 条件和提供者
- reactjs - 如何为 REACT JS 中的无状态函数代码编写 JEST 单元测试用例,如下所示:
- php - 如何将多项选择数据作为数组发布到mysql数据库表
- javascript - 在draft-js中选择后实体内的光标