html - CSS覆盖定位问题
问题描述
我有一个带有 CSS 叠加层的图像,它从底部向上滑动,它在左侧。我想要它在中心。另外,我不想承认,但另一篇文章没有帮助。我收到了一个帖子建议(IDK 为什么),但我看不出它对我有什么帮助。我对此不是很熟悉,我正在做的是我的一个班级的一个项目,这已经很晚了,我正在努力争取额外的学分。
我只想知道如何让它去中心。我尝试将其向左移动 25%、50% 和 75%,与右侧相同。它只是不会移动。这是代码:
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 50%;
height: auto;
}
/* This is what I have been using with to move it. */
.overlay {
position: absolute;
bottom: 0;
left: 0;
/* This will move wherever */
right: 0;
background-color: darkblue;
overflow: hidden;
width: 50%;
height: 0;
transition: .5s ease;
}
.container:hover .overlay {
height: 100%;
}
.text {
white-space: nowrap;
color: red;
font-size: 20px;
font-family: cursive;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<div class="container">
<img src="image is here" alt="Avatar" class="image"> This won't move
<div class="overlay">
<div class="text"><u>This is just here atm</u></div>
</div>
</div>
解决方案
我解决了。我只需要使用“中心”标签并将我的样式标签放入其中。移动了覆盖,它被修复了。
推荐阅读
- python - Django 管理面板不会呈现 CSS
- swift - 在结构内指定 Hashable 类型约束
- sql - 删除表中具有依赖外键的重复行
- node.js - 节点塞内卡猫鼬奇怪的行为
- angularjs - Angular UI Grid:如何用来自数据库/后端的真实数据填充下拉过滤器
- python - 如何为异步生成器提供来自 python.net 的事件
- javascript - 模拟红绿灯
- python - 如何将 Pandas 中的多标题 Excel 转换为简单表
- css - 我无法让组件在 Angular2 中显示为内联块
- php - Codeignigter 控制器不返回 JSON