我在 CSS 中遇到垂直对齐问题。我想从下到上显示内容。
我的主要目标:
- 内容宽度基于父级高度;
- 内容与父级底部对齐;
- 内容逆时针旋转;
我看过这个链接:Vertical Alignment和其他关于SO。很遗憾,我找不到答案。
我制作了一个示例 fiddle 来说明我的问题:vertical alignment fiddle .我的结果是:
- 元素宽度基于父元素宽度;
- 内容旋转时有间隙;
.container {
position: absolute;
width: 100%;
height: 92%;
}
.side-content {
position: relative;
float: left;
vertical-align: top;
border: 2px solid rgba(255, 0, 0, 1.0);
width: 20%;
height: 100%;
box-sizing: border-box;
}
.main-content {
position: relative;
float: left;
vertical-align: top;
border: 2px solid rgba(255, 0, 255, 1.0);
width: 80%;
height: 100%;
box-sizing: border-box;
}
.text-content {
border: 2px solid rgba(255, 0, 0, 1.0);
bottom: 0;
width: 100%;
position: absolute;
float: left;
font-size: 10px;
color: rgba(255, 102, 0, 1.0);
transform-origin: left top 0;
transform: rotate(-90deg);
}
<section class="container">
<div class="side-content">
<span class="text-content">Vertical Alignment</span>
</div>
<div class="main-content">
</div>
</section>
最佳答案
试试这个,调整 transform-origin
值,并添加 translateY(100%)
和 rotate(-90deg)
。
.text-content {
...
transform-origin: left bottom;
transform: rotate(-90deg) translateY(100%);
}
.container {
position: absolute;
width: 100%;
height: 92%;
}
.side-content {
position: relative;
float: left;
vertical-align: top;
border: 2px solid rgba(255, 0, 0, 1.0);
width: 20%;
height: 100%;
box-sizing: border-box;
}
.main-content {
position: relative;
float: left;
vertical-align: top;
border: 2px solid rgba(255, 0, 255, 1.0);
width: 80%;
height: 100%;
box-sizing: border-box;
}
.text-content {
border: 2px solid rgba(255, 0, 0, 1.0);
bottom: 0;
width: 100%;
position: absolute;
float: left;
font-size: 10px;
color: rgba(255, 102, 0, 1.0);
transform-origin: left bottom;
transform: rotate(-90deg) translateY(100%);
}
<section class="container">
<div class="side-content">
<span class="text-content">Vertical Alignment</span>
</div>
<div class="main-content">
</div>
</section>
关于html - CSS 旋转的垂直对齐问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37898453/