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

Question

我试图将数量文本显示为垂直水平，就像 Mozilla 开发人员页面显示的浏览器支持但使用 flex CSS 例如。 https://developer.mozilla.org/en-US/docs/Web/CSS/transform（查看页面底部）

我已经尝试了 flex 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 属性以执行文本中心

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

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

Answer 2

如果你想让它看起来和 Mozilla 中的一模一样，你需要写作模式和绝对定位，这里我没有使用 flexbox，使用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);
    }