css - 如何使用 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 使金额文本垂直对齐，但它打破了

fiddle :https://jsfiddle.net/snx5mqj8/1/

Answer 1

我更改了一些CSS属性来执行文本居中

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

这是你的 fiddle :https://jsfiddle.net/df6uraLw