垂直对齐 div 元素 [英] align div elements vertically

查看：47
本文介绍了垂直对齐 div 元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

嘿嘿，希望你们一切顺利.所以我对 css 有问题，我不太了解它，但我正在努力超越自己的极限以使其工作.

所以我有这 4 张卡片:

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

code.js:

<div className={styles.title}>{标题}
<div className={styles.valueAndUnit}><div className={styles.value}>{价值}

<div className={styles.unit}>{单元}

<div className={styles.subValue}>{子值}

<div className={styles.date}>{日期}

css 代码:

.subValue {文本对齐:右；右边距:10px；最小高度:25px；}.日期 {最小高度:25px；颜色:浅灰色；文本对齐:右；}

希望大家帮忙

解决方案

就在你的课堂上这样做.

.subValue {文本对齐:右；最小高度:25px；}

helo guys hope you're doing good. so i have problem with css i don't really understand it but i'm pushing muself beyond my limits to make it work.

so i have these 4 cards:

so if you can see the subvalue and date are not vertically aligned properly( for example in the first card the M and 2 are not under each others) what i want is to vertically align them on the right side

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 code:

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

}


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

}

hope you guys can help

解决方案

just do in your class like this .

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

这篇关于垂直对齐 div 元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆