垂直对齐 div 个元素

Question

嘿伙计们，希望你们一切顺利。所以我对 css 有疑问，我不是很理解，但我正在努力超越自己的极限以使其发挥作用。

所以我有这 4 张牌：

所以如果你看到子值和日期没有正确垂直对齐（例如在第一张卡片中 M 和 2 不在彼此下面）我想要的是将它们垂直对齐在右侧

code.js:

<div className={styles.card}>
            <div className={styles.title}>
            {title}
            </div>
            <div className={styles.valueAndUnit}>
            <div className={styles.value}>
            {value}
            </div>
            <div className={styles.unit}>
            {unit}
            </div>
            </div>
            <div className={styles.subValue}>
            {subValue}
            </div>
            <div className={styles.date}>
            {date}
            </div>
        </div>

css代码：

.subValue {
    text-align: right;
    margin-right: 10px;
    min-height:25px;

}


.date {
    min-height:25px;
    color:lightslategrey;
    text-align: right;    

}

希望大家帮忙

Answer 1

就这样 class 做。

.subValue {
    text-align: right;
    min-height:25px;
}

垂直对齐 div 个元素

align div elements vertically

styling

vertical-alignment

reactjs