gpt4 book ai didi

html - 旋转文本的水平和底部对齐

转载 作者:行者123 更新时间:2023-11-28 15:25:59 25 4
gpt4 key购买 nike

我在为我正在处理的元素创建此组件时遇到问题。要求包括文本旋转的竖线 90deg ,在栏内水平居中,并与栏底部对齐。下面的屏幕截图是它应该看起来的样子。我已链接到底部的代码笔,向您展示我目前拥有的内容。

其他注意事项

  1. 我想尽可能避免绝对定位
  2. 实际标题本身的宽度需要可变
  3. 当窗口变小时,我希望它从底部而不是顶部截断(不会破坏交易)

vertical

另请记住,我已设置 overflow-y: hidden<html> 上和 <body>防止垂直滚动发生的标签。

Codepen example

最佳答案

如果没有绝对定位,这种布局实现起来有点棘手。

查看解决方案 - https://codepen.io/trentmrand/pen/KvPgXY


我已经删除了内容容器,所以您现在生成的 HTML 如下所示,

 <div class="c-key">
<div class="c-key__label">Some label</div>
<h1 class="c-key__title">
Milestones
</h1>
</div>

我还更新了您的 SCSS 以使用绝对定位,如下所示,

.c-key {
width:600px;
height: 600px;
position: relative; // make container use relative positioning
background: #000;

&__label {
background: #fff;
border-right: 1px solid #000;
font-size: 13px;
padding: .25rem .5rem;
text-transform: uppercase;
}

&__title {
color: #fff;
font-size: 5rem;
transform: translateX(46px) rotate(-90deg); // rotate text and translate half of the text height to center
transform-origin: left bottom; // rotate from bottom-left
position: absolute; // use absolute positioning with this element
bottom: 0; // position at bottom of parent element
left: 50%; // position at middle of parent element
margin: 0 !important; // remove default padding from header tag
}
}

关于html - 旋转文本的水平和底部对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45225774/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com