Html CSS 90*旋转div can'；t居中文本（宽度限制旋转）-使用flexbox

因此，我尝试在右侧创建一个选项卡，如下图所示：

我希望右边的div只有25px的宽度，我使用flexbox for div来保存紫色参数列表以及右边的选项卡

当我为这个flexbox设置

25px

时，我在其中旋转的div的宽度为25px，因此我无法将“参数”标题居中。请告诉我该怎么做，谢谢

代码，反应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>
)

---

这是我能为你做的最好的了

您可以更新

.post list部分的最小高度

CSS值（或在其上添加内容）以查看位置更新

解决方案是向旋转元素添加一个受控宽度（即使没有视觉效果），并在旋转元素之前从该尺寸的一半进行平移

.flexbox父控制台{
显示器：flex；
溢出：隐藏；
宽度：100%；
位置：相对位置；
背景：#EEE；
}
·职位表组{
最小高度：300px；
宽度：钙（100%-1.5em）；
背景：#ABB；
}
.导航部分{
保证金：自动0；
宽度：1.5em；
线高：1.5em；
身高：100%；
}
.导航部分>分区{
宽度：calc（200px+1.5em）；
保证金：0；
文本对齐：居中；
变换原点：50%50%；
变换：translateX（-100px）旋转（90度）；
位置：相对位置；
}

职位列表
参数

这是我能为您提供的最大帮助

您可以更新

.post list部分的最小高度

CSS值（或在其上添加内容）以查看位置更新

解决方案是向旋转元素添加一个受控宽度（即使没有视觉效果），并在旋转元素之前从该尺寸的一半进行平移

.flexbox父控制台{
显示器：flex；
溢出：隐藏；
宽度：100%；
位置：相对位置；
背景：#EEE；
}
·职位表组{
最小高度：300px；
宽度：钙（100%-1.5em）；
背景：#ABB；
}
.导航部分{
保证金：自动0；
宽度：1.5em；
线高：1.5em；
身高：100%；
}
.导航部分>分区{
宽度：calc（200px+1.5em）；
保证金：0；
文本对齐：居中；
变换原点：50%50%；
变换：translateX（-100px）旋转（90度）；
位置：相对位置；
}

职位列表
参数

您还可以查看

。垂直lr{
-webkit写作模式：垂直lr；
/*老温野生动物园*/
书写方式：垂直lr；
写入方式：tb-lr；
/*实际上
写作模式：侧边lr；将是唯一的，但并非随处可见。因此，让我们进行转换*/
变换：比例（-1，-1）；
背景：绿色；
文本对齐：居中；
宽度：1.5em；
线高：1.5em；
字体大小：粗体；
字体变体：小大写字母；
}
.flex{
显示器：flex；
}
/*你是说这个吗*/
* {
框大小：边框框；
}
html，
身体{
身高：100%；
保证金：0；
填充：0.5em；
}
.填充区域内容{
溢出：自动；
弹性：1；
身高：100%；
}
/*你的代码*/
.flexbox父控制台{
宽度：100%；
身高：100%；
显示器：flex；
弯曲方向：行；
调整内容：灵活启动；
/*在主轴上对齐项目*/
对齐项目：拉伸；
/*在横轴上对齐项目*/
对齐内容：拉伸；
/*横轴上的额外空间*/
}
.self-center{}
.溢出隐藏{
溢出：隐藏
}
.轮换{
宽度300px；
高度：24px；
文本对齐：居中；
背景：绿色；
}
.b--浅灰色{
边框颜色：#eee
}
.bg-black-10{
背景色：rgba（0,0,0,1）
}
.bw2{
边框宽度：.25rem
}
.b--固体{
边框样式：实心
}
.pa2{
填充：.5rem
}

项目
项目
项目
项目
项目
项目
项目
项目
项目
项目

参数

您还可以查看

。垂直lr{
-webkit写作模式：垂直lr；
/*老温野生动物园*/
书写方式：垂直lr；
写入方式：tb-lr；
/*实际上
写作模式：侧边lr；将是唯一的，但并非随处可见。因此，让我们进行转换*/
变换：比例（-1，-1）；
背景：绿色；
文本对齐：居中；
宽度：1.5em；
线高：1.5em；
字体大小：粗体；
字体变体：小大写字母；
}
.flex{
显示器：flex；
}
/*你是说这个吗*/
* {
框大小：边框框；
}
html，
身体{
身高：100%；
保证金：0；
填充：0.5em；
}
.填充区域内容{
溢出：自动；
弹性：1；
身高：100%；
}
/*你的代码*/
.flexbox父控制台{
宽度：100%；
身高：100%；
显示器：flex；
弯曲方向：行；
调整内容：灵活启动；
/*在主轴上对齐项目*/
对齐项目：拉伸；
/*在横轴上对齐项目*/
对齐内容：拉伸；
/*横轴上的额外空间*/
}
.self-center{}
.溢出隐藏{
溢出：隐藏
}
.轮换{
宽度300px；
高度：24px；
文本对齐：居中；
背景：绿色；
}
.b--浅灰色{
边框颜色：#eee
}
.bg-black-10{
背景色：rgba（0,0,0,1）
}
.bw2{
边框宽度：.25rem
}
.b--固体{
边框样式：实心
}
.pa2{
填充：.5rem
}

项目
项目
项目
项目
项目
项目
项目
项目
项目
项目

参数

稍后我会检查这是否有效，我今天的工作已经完成，谢谢亚瑟！我会检查一下，看看这是否工作后，我今天的工作完成了，谢谢你亚瑟！我想添加

第二个选项卡

，并将它们集中在各自的区域中。知道什么代码吗

.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
}