如何旋转文本并正确定位？（CSS，HTML）

Question

我正在尝试将旋转的标题与一些文本并排放置。使用绝对定位可以静态实现（左图）。但是，当页面被调整大小时，定位会失败（右图）。

当前CSS（可以更改）：

.headline {
  white-space: nowrap;
  position: absolute;
  top: 185px;
  left: -20px;
  transform: rotate(270deg);
}

当前HTML结构（可更改）：

<header>
    <h1 class="headline">Über mich</h1>
</header>
<div class="text">
  <p class="introduction">....</p>
</div>

如何定位元素，使其始终与段落保持20px的距离？是否有现成的解决方案可以提供参考？

使用JS（和jQuery）的解决方案是可行的，但我显然更喜欢使用CSS。

- Sebastian Hojas

---

使用Fiddle展示你的标记，无法准确诊断你的问题。 - Benjamin

我也遇到过这个问题。我深入研究了一下，但没有找到真正的解释。奇怪的是，宽度和高度被“旋转”，如果旋转中心在左上角开始时，如果您逆时针旋转270°，则在左下角。然后，您需要将顶部设置为<h1>的宽度，最简单的方法可能是右对齐，将变换原点设置为右上角，并逆时针旋转90°。但老实说，那只是一种猜测。 - philipp

你尝试过通过 transform-origin: center; 来指定 transform-origin 吗？ - Smamatti

Answer 1

我遇到了同样的问题。通过以下纯CSS方法解决：

.parent {
  position: relative;
}

.child {
  position: absolute;
  transform: translateX(-100%) rotate(-90deg);
  transform-origin: right;
  left: 30px; /* change this value to match needs */
  top: 30px; /* change this value to match needs */
}

- Olivier

Answer 2

解决方案是将Diego的答案和Smamatti的评论结合起来：

我必须使用transform-origin:bottom 和 width:0。那很快就能解决，我遇到的大问题是独立地定位文本以适应文本的长度。只有通过使用JavaScript才能实现这一点。

.header
{
    margin: 0;
    width: 0;
    white-space: nowrap;
    position: absolute;
    text-align: left;
    transform-origin: bottom; 
    margin-top: 280px;
    transform: rotate(270deg);
}

Javascript（确保变量文本长度的兼容性）:

function adjustSideHeader() {

//check if the headline is visible
  if($('h1.headline').length > 0)
  {
    var headline = $('h1.headline')[0];
    var stringLength = headline.textContent.length;
    //add style tag to support media queries
    document.querySelector('style').textContent +=
       "h1.headline { margin-top: " + (stringLength*23.5) + "px; -webkit-transition: margin-top 2s; transition: margin-top 2s;}"
  }    
}

// fire it when document is loaded
$(document).ready(setTimeout(adjustSideHeader, 300));

结果：

该图片未提供任何具体信息，因此无法对其进行翻译。

- Sebastian Hojas

Answer 3

你尝试过移动吗？

<h1 class="headline">Über mich</h1>

内部

<div class="text">?

设置

.text {
    position: relative;
}

这样位置就相对于“text” div了。之后，您可能希望通过减少其左侧值将“Über mich”文本向左移动。

- Jarzka

Answer 4

我有一个答案，可能有点晚，但对我非常有效。

通常你的文本会有一个类或ID，并且它将是position:absolute，然后是定位值，如下所示：

.TextClass{
    position:absolute;
    top:50%;
    left:55%;
    transform:rotate(-90deg);

等等。

然而，当您旋转时，定位变为相对定位（如上所述）。

我发现只需将旋转的文本放在父 div 中，您就可以根据需要定位（未旋转的绝对定位）父 div，然后在父 div 中旋转文本（它将是相对定位），就像这样：

.divname{
    position:absolute;
    top:50vh;
    left:50vw;
}
.TextClass{
    position:relative;
    transform:rotate(-90deg);
}

- Quibble

Answer 5

你尝试过使用position:relative和margin属性吗？我想它应该是像这样的：

.headline {
     white-space: nowrap;
     position: relative; //changed
     margin-top: 185px; //changed
     margin-left: -20px; //changed
     transform: rotate(270deg);
}

注意：我认为你应该将标题移到段落内部。

- Diego