Question

我正在为我正在处理的项目创建此组件时遇到问题。要求包括一个垂直条，其中文本旋转90deg，在条形内水平居中，并与条形底部对齐。下面的截图是它应该是什么样子。我已经链接到底部的编码器，以向您展示我到目前为止所拥有的内容。

其他笔记

我想尽可能避免绝对定位
实际标题的宽度本身需要是可变的
当窗户变小时，我宁愿它从底部而不是顶部切断（不是交易破坏者）

另请注意，我已在overflow-y: hidden和<html>标记上设置了<body>，以防止垂直滚动发生。

Codepen example

Answer 1

这种布局在没有绝对定位的情况下实现起来有点棘手。

查看解决方案 - 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
  }
}

旋转文本的水平和底部对齐方式

1 个答案: