html - 旋转文本的问题

Question

在练习了一些我一直在学习的 CSS 之后，我遇到了一个问题，尽管尝试了很多东西，但我似乎无法得到我想要的东西。我将文本转换为垂直放置在灰色 div 中，但我似乎无法理解，因此所有单词都显示在一行中。我如何实现这一点？我想一旦我明白了，应该很容易将它们集中放置。

http://jsfiddle.net/#&togetherjs=DGHlFmn0Hg

Answer 1

您应该首先使用 transform 将文本居中和绝对定位。然后只需应用 rotate变换(默认围绕中心点):

#headline .buttons {
  height:100%;
  width:50px;
  background:#a5a5a5;
  float:right;
  margin-right:3px;
  color:#fff;
  /* add this */
  position:relative;
}

#headline .buttons p {  
  margin:0;    
  text-align:center;    
  position:absolute;
  width:260px;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%) rotate(-90deg);
}

Jsfiddle demo .

请注意 width的 <p>元素将只填充很小的包含按钮的宽度(因此文本换行)。所以你必须设置 width明确地尽可能大(这并不重要)，以便文本将跨越一行。