如何使用用于条形图的Flex CSS将文本垂直居中

Question

我试图显示的数量文本垂直水平，就像Mozilla页面显示浏览器支持，但使用灵活的CSS，例如。https://developer.mozilla.org/en-US/docs/Web/CSS/transform (在页面底部签入)

我已经尝试了弹性CSS几乎我已经实现了，但文本是破碎的，它不是中心和底部对齐。

CSS

ul.chart-bg {
    width: 100%;
    height: 100%;
    border-bottom: 1px solid #ccc;
    padding: 0;
    display: flex;
    justify-content: space-between;
}

.container {
    flex: 1 1 auto;
    list-style: none;
    margin-left: 15px;
    display: flex;
    align-items: flex-end;
}

ul li.container:nth-child(1) {
    margin: 0 !important;
}

.skills {
    flex: 1 1 auto;
    padding: 0;
    width: 100%;
    animation: draw 1s ease-in-out;
    background-color: #e9e9e9;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    display: flex;
    align-items: flex-end;
}

.amount {
    flex: 1 1 auto;
    color: #9c9c9c;
    font-family: "sans-serif";
    transform-origin: 0 0;
    transform: rotate(-90deg);
    animation: amountVal 2s ease-in-out;
}

尝试使用flex对条形图进行垂直对齐，但其中断

小提琴：https://jsfiddle.net/snx5mqj8/1/

Answer 1

我更改了一些CSS属性以执行文本中心。

我删除了transform-origin类中的amount属性，并在skill类中将align-items: flex-end;替换为center，并在一行中添加white-space CSS属性以查看数量和文本。

这是你的小提琴：https://jsfiddle.net/df6uraLw

Answer 2

如果您想让它看起来与mozilla中的完全一样，您将需要写入模式和绝对定位，这里我没有使用柔性盒，使用writing-mode和position:absolute，它对齐非常好，看看它是否适合您https://jsfiddle.net/k6gcxysr/。

.skills {
  padding: 0;
  width:100%;
  animation: draw 1s ease-in-out;
  background-color: #e9e9e9;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  position: relative;
}
.amount {
    color: #9c9c9c;
    font-family: "sans-serif";
    animation: amountVal 2s ease-in-out; 
    writing-mode: vertical-rl;
    position:absolute;
    right:30%;
    bottom:4%;
    transform: rotateZ(180deg);
    }