html - CSS 90 *旋转的div不能使文本居中(宽度限制旋转)-使用flexbox

因此，我尝试在右侧制作一个标签，如下图所示：


我希望右边的div只有25px宽度，我正在使用flexbox容纳紫色参数列表以及右边的选项卡的div。

当我为此flexbox设置25px时，我在其中旋转的div的宽度为25px，因此无法将“ parameters”标题居中。请让我知道我该怎么做，谢谢！

代码，React JS文件：

return (
    <div className='flexbox-parent-console overflow-hidden'>
        <div className='b--light-gray bw2 b--solid w275p bg-white pa2 fill-area-content'>
            <PostListArray />
        </div>
        <div className='bg-black-10 w25p self-center  bg-light-gray'>
            <div className='r90 rotateddiv'>
                Parameters
            </div>
        </div>
    </div>
)

CSS：

.flexbox-parent-console {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start; /* align items in Main Axis */
    align-items: stretch; /* align items in Cross Axis */
    align-content: stretch; /* Extra space in Cross Axis */
}
.self-center {
    -ms-flex-item-align: center;
    align-self: center
}
.overflow-hidden {
    overflow: hidden
}
.fill-area-content {
    overflow: auto;
}
.r90 {
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.rotateddiv {
    width 300px;
    height: 24px;
    text-align: center;
    background: green;
}
//Non Essentials
.b--light-gray {
    border-color: #eee
}
.bg-black-10 {
    background-color: rgba(0, 0, 0, .1)
}
.bw2 {
    border-width: .25rem
}
.b--solid {
    border-style: solid
}
.pa2 {
    padding: .5rem
}

最佳答案

您还可以查看writing-mode

.vertical-lr {
  -webkit-writing-mode: vertical-lr;
  /* old Win safari */
  writing-mode: vertical-lr;
  writing-mode: tb-lr;
  /* actually
  writing-mode:sideways-lr; would be the one , but not avalaible everywhere so, let's transform */
  transform: scale(-1, -1);
  background: green;
  text-align: center;
  width: 1.5em;
  line-height: 1.5em;
  font-weight: bold;
  font-variant: small-caps;
}

.flex {
  display: flex;
}
/* did you mean  this ? */

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0.5em;
}

.fill-area-content {
  overflow: auto;
  flex: 1;
  height: 100%;
}

/* your code */
.flexbox-parent-console {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  /* align items in Main Axis */
  align-items: stretch;
  /* align items in Cross Axis */
  align-content: stretch;
  /* Extra space in Cross Axis */
}

.self-center {}

.overflow-hidden {
  overflow: hidden
}

.rotateddiv {
  width 300px;
  height: 24px;
  text-align: center;
  background: green;
}

.b--light-gray {
  border-color: #eee
}

.bg-black-10 {
  background-color: rgba(0, 0, 0, .1)
}

.bw2 {
  border-width: .25rem
}

.b--solid {
  border-style: solid
}

.pa2 {
  padding: .5rem
}

<div class='flexbox-parent-console overflow-hidden'>
  <div class='b--light-gray bw2 b--solid w275p bg-white pa2 fill-area-content'>
    <ul>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ul>
  </div>
  <div class='bg-black-10 w25p flex  bg-light-gray'>
    <div class=' vertical-lr'>
      Parameters
    </div>
  </div>
</div>

关于html - CSS 90 *旋转的div不能使文本居中(宽度限制旋转)-使用flexbox，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46993971/