如何对齐头像圆圈和文本内容css

Question

我想对齐文本内容和头像圈。这是我定义的类

.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 顶部有空间。如果我能去掉这个空间问题就解决了。但我不知道我该怎么做？即使更改margin文本 div 也不起作用？有什么帮助吗？

Answer 1

像往常一样，使用传统 CSS（浮动、边距、内联块等）实现的痛苦在 Flexbox 中变得轻而易举。

.user-detail {
  width: 300px;
  height: 100px;
  border: blue solid 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-detail>div {
  border: green solid 2px;
}

.user-detail .details {
  display: flex;
  flex-direction: column;
}

<div class="user-detail right">
  <div class="details">
    <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>