Question

我创建了两个矩形div（需要保持60px宽和150px高），其中包含文本。文本意味着在垂直方向上对齐，因此我使用transform: rotate(-90deg)垂直地对齐文本。

我希望文本垂直并居中显示在框中。在垂直旋转文本之前，我使用display: table和vertical-align: middle方法对文本进行了居中。当文本是水平的时，这非常有效。但是，在旋转内容后，文本不会保持居中。 CSS仍将文本居中，就好像它是水平的一样。

我尝试使用绝对/相对定位来偏移顶部和左侧的文本，但是当我删除display: table和vertical-align: center属性时，文本消失。

关于如何在保持表格属性的同时将垂直角度文本居中的任何想法？任何意见都将不胜感激。

小提琴：https://jsfiddle.net/sxchx6zm/3/

HTML

<div id="both">
    <div class="rectangle">
        <div class="vertical">Text Area 1</div>
    </div>  
    <div class="rectangle">
        <div class="vertical">Test Area 2</div>
    </div>   
</div>

CSS

.rectangle {
  height: 150px;
  width: 60px;
  background-color: #d3d3d3;
  border: 1px solid red;
  display: table;

}

.vertical {
  font-size: 16pt;
  height: 150px;
  max-width: 60px;
  display: table-cell;
  vertical-align: middle;
  transform: rotate(-90deg);
  white-space: nowrap;
}

Answer 1

如果您可以为width而不是.vertical设置max-width，我就能找到一种方法。

如果您这样做，则只需将其添加到您的CSS .vertical - text-align:center;

这使你的CSS成为了这个：

.rectangle {
  height: 150px;
  width: 60px;
  background-color: #d3d3d3;
  border: 1px solid red;
  display: table;
}

.vertical {
  font-size: 16pt;
  height: 150px;
  width: 60px; //modified
  display: table-cell;
  vertical-align: middle;
  transform: rotate(-90deg);
  white-space: nowrap;
  text-align : center; //added
}

请注意，您需要水平和垂直居中文本，因此这个解决方案。这是更新的小提琴：https://jsfiddle.net/sxchx6zm/19/

Answer 2

这是一个不需要使用CSS表的解决方案：

.rectangle {
  height: 150px;
  width: 60px;
  background-color: #d3d3d3;
  border: 1px solid red;
}

.vertical {
  text-align: center;
  font-size: 14pt;
  line-height: 150px;   /* assumes text takes one line only */
  white-space: nowrap;
  margin-left: -100%;   /* centers so that the element overflows to the */
  margin-right: -100%;  /* ... left and right of its parent equally */
  transform: rotate(-90deg);
}

<div class="rectangle">
  <div class="vertical">Test Area 1</div>
</div>

<div class="rectangle">
  <div class="vertical">Test Area two</div>
</div>

<div class="rectangle">
  <div class="vertical">Test Area THREE</div>
</div>

文本中心水平，但在转换时不垂直

2 个答案: