reactjs - 垂直对齐 div 元素

Question

helo 伙计们希望你做得很好。所以我对 css 有问题，我不太了解它，但我正在努力超越自己的极限以使其发挥作用。

所以我有这4张卡：

因此，如果您可以看到子值和日期未正确垂直对齐（例如，在第一张卡片中，M 和 2 不在彼此下方）我想要的是在右侧垂直对齐它们

代码.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;    

}

希望你们能帮忙

标签： reactjsvertical-alignmentstyling

Answer 1

像这样在你的课堂上做。

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