Html 如何对齐虚拟人物圈和文本内容css

我想把文字内容和化身圈对齐。下面是我定义的类

.user-detail {
    display: inline-block;
    text-transform: uppercase;
    text-align: right;
    
    .user-detail__username {
        margin: 18px 16px 0px 10px;
        display: block;
        float: left;
        font-size: $font-size;
        font-weight: 500;
    }
    .user-detail__role {
        margin: 18px 16px 0px 10px;
        display: block;
        font-size: $font-size * 0.9;
        font-style: normal;
        line-height: 13px;
        font-weight: 300;
    }
    .user-detail__avatar-circle {
        display: inline-block;
        margin: 8px 11px 0px 0px;
        width: 45px;
        height: 45px;
        border-radius: 50%;
        border: 1px solid $lightstroke;
    }
    .user-detail__avatar {
        position: relative;
        font-size: 51px; 
        line-height: 43px; 
        left:-4px;
    }
}

这是HTML标记

<div class="user-detail right">
    <div style="display:inline-block">
        <span class="user-detail__username">
            Adminstrator
        </span>
        <span class="user-detail__role">Adminstrator</span>
    </div>

    <div class="user-detail__avatar-circle">
        <i class="material-icons user-detail__avatar">account_circle</i>
    </div>
</div>

管理员
管理员
会计圈

这里是这样的

---

我想文字和化身圈应该是底部对齐。如果我检查元素，文本div顶部有空格。如果我可以删除这个空格，问题就会解决。但我不知道我怎么能做到？即使更改text div的

边距

也不起作用？有什么帮助吗？

与往常一样，使用传统CSS（浮动、边距、内联块等）实现的痛苦是Flexbox带来的轻松

。用户详细信息{
宽度：300px；
高度：100px；
边框：蓝色实心2px；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.用户详细信息>div{
边框：绿色实心2px；
}
.用户详细信息.详细信息{
显示器：flex；
弯曲方向：立柱；
}

管理员
管理员
会计圈

您应该使用Flexbox，因为这样比较省力。 试着做你的

.user-detail {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
}

---

有关flexbox的更多信息：

垂直对齐：顶部设置通常将div元素对齐并定位到顶部，在您的情况下为“管理员”文本

您需要将html更改为（检查下面代码中的第二个

标记以了解更改）

管理员
管理员
会计圈

---

希望这有帮助

尝试添加

垂直对齐：文本顶部到您的
标签。@DavidR设置
垂直对齐：顶部
工作。但是你能解释一下原因吗？空间是什么？
对齐项目：居中它是否适用于该分区中的所有元素？@Nihal是。如果出于任何原因，您只想更改一个图元的对齐方式，可以向该图元添加
align self:auto | flex start | flex end | center | baseline | stretch
。
<div class="user-detail right">
    <div style="display:inline-block;vertical-align: top">
        <span class="user-detail__username">
            Adminstrator
        </span>
        <span class="user-detail__role">Adminstrator</span>
    </div>

    <div class="user-detail__avatar-circle">
        <i class="material-icons user-detail__avatar">account_circle</i>
    </div>
</div>