html - IE11:Flex 容器内的绝对 DIV 位置保持在流动之外
问题描述
我有一个包含图像和 div 的 display:flex 容器,图像具有 100% 的宽度,并且 div 必须在容器中水平和垂直居中(具有 flex 属性)。为了使图像显示在图像顶部,我使用位置:绝对。问题是在 IE11 上定位的绝对 div 一直显示在流程之外。
这是我的 HTML:
<div class="container shop-service">
<img class="img-container" src="/_ui/responsive/theme-lambda/services/image-services.jpg">
<div class="shop-service-content">
<div class="shop-service-img">
<img alt="ecommerce" src="/_ui/responsive/theme-lambda/services/ecommerce.svg"></div>
<h2>E-commerce</h2>
<p class="col-md-12">Poderá fazer os seus pedidos a qualquer hora do dia, 365 días por ano, de forma
segura, ágil e confidencial.</p> <a class="btn btn-primary" href="/Open-Catalogue/c/1">Comprar agora</a>
</div>
</div>
这是我的 CSS:
.shop-service {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding-top: 35px;
padding-bottom: 35px;
position: relative;
}
.shop-service img {
width: 100%;
height: auto;
}
.shop-service .shop-service-content {
position: absolute;
width: 100%;
max-width: 400px;
padding: 0 15px;
}
解决方案
在IE中遇到flexbox和absolute position的问题是正常的。
更推荐的方法是使用transform: translate()属性。
您可以结合 Flexbox 和 transform: translate,因为后者不会影响前者。
我自己做了一个样本,也许你可以参考一下。
HTML。
<div class="container shop-service">
<img class="img-container" src="Images/test7.jpg" />
<div class="shop-service-content">
<div class="shop-service-img">
<img alt="ecommerce" src="Images/test6.jpg" />
</div>
<h2>E-commerce</h2>
<p class="col-md-12">
Poderá fazer os seus pedidos a qualquer hora do dia, 365 días por ano, de forma
segura, ágil e confidencial.
</p> <a class="btn btn-primary" href="#">Comprar agora</a>
</div>
</div>
CSS。
.shop-service {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding-top: 35px;
padding-bottom: 35px;
position: relative;
}
.shop-service .shop-service-content {
position: absolute;
width: 100%;
max-width: 400px;
padding: 0 15px;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.shop-service img {
width: 100%;
height: auto;
}
结果截图:结果
推荐阅读
- javascript - 如何在javascript中按相关性对搜索结果进行排序
- python-3.x - 选择文件名中包含“x”的文件夹中的所有文件
- c# - 在c#中将字符串转换为等效的字节十六进制
- c++ - 以 constexpr 和不带 constexpr 的形式运行函数
- windbg - WinDbg 显示中缺少标识符名称
- python - 从数据库中的数据填充下拉列表 - Django
- notifications - fail2ban 测试发送电子邮件
- javascript - 使用 vanilla JS 显示 Html 表单数据
- c# - SkiaSharp 切出路径
- python - Python按相对于列的最低值合并