html - 在容器内居中旋转的 div
问题描述
我正在尝试制作90deg
价格标签,但是我不确定为什么它没有按照我的意愿做,我希望标签与顶部和右侧(顶部:0 和右侧:0)匹配。
它不是这样做的, 代码
<div class='box'>
<div class='price-tag'>
$23.12
</div>
</div>
.box{
margin:10em;
height:100px;
width:100px;
position:relative;
background:red;
}
.box .price-tag{
background:yellow;
position:absolute;
top:0;
right:0;
display:inline-block;
transform:rotate(90deg) translate(50%, 0%);
}
解决方案
另一种方法是通过调整writing-mode
.box {
height: 100px;
width: 100px;
position: relative;
background: red;
}
.box .price-tag {
background: yellow;
position: absolute;
top: 0;
right: 0;
writing-mode: vertical-rl; /* tb-rl if you want old browser support*/
}
<div class='box'>
<div class='price-tag'>
$23.12
</div>
</div>
推荐阅读
- flutter - Flutter:知道前置摄像头是否在镜像图像
- sql-server - Spring Boot 2.0 Hikari 自动连接不起作用
- coldfusion - 改写 lucee 的连接
- wso2 - 在 WSO2 身份服务器中启用单一注销并重定向到自定义登录页面
- android - 触发通知时唤醒设备
- flutter - 从 Visual Studio Code 运行所有 Flutter 单元测试
- c++ - 已声明但未初始化的变量存储什么?
- ruby-on-rails - 【carrierwave+ffmpeg】无法上传有声视频
- php - 递归删除最低级别的孩子 Symfony/Doctrine
- python - 如何修复sqlite'数据库锁定'?