Question

我有两列布局，两列高度相等。我用flexbox使它们的高度相同。

左栏应该包含垂直文本，然后应该沿着列的整个高度居中

HTML看起来像这样

<div class="month">
  <div class="name"><div>Jan</div></div>
    <div class="days">
       <div class="day">123</div>
       <div class="day">123</div>
       <div class="day">123</div>
       <div class="day">123</div>      
     </div>
  </div>

这就是CSS

div.month {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
}
div.name {
  border: 1px solid red;
  width: 20px;
  position: relative;
}
div.name  div {
  transform: rotate(90deg);
  transform-origin: left top 0;
  margin-left: 20px;
  width: 100%;
  text-align: center;
}

div.days {
  width: 100%;
  margin-left: 20px;

div.day {
  border: 1px solid black;
}

这是一个例子 http://jsfiddle.net/o6xv824u/

我无法弄清楚如何将文本置于div.month中心

任何想法？

Answer 1

如果你想垂直居中对齐，你可以使用绝对位置，＆＃34; margin-top＆＃34; ＆＃34; top＆＃34; css属性。

我也对你的css代码做了一些修改。看看working fiddle。

CSS：

div.name  div {
      transform: rotate(90deg);
      transform-origin: center center;   // rotate the text from center origin  
      width: 100%;
      position: absolute;
      top: 50%;
      margin-top: -50%; // to make it align vertically center
}

Answer 2

您可以使用绝对位置然后翻译。

http://jsfiddle.net/o6xv824u/1/

position:absolute; top:50%; left:50%;

transform: translate (-50%,-50%);

将div中的垂直文本居中

2 个答案: