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的顶部有空格。如果我能删除这个空间问题就会解决。但我不知道我怎么能这样做？甚至更改文本div的margin不起作用？有什么帮助吗？

Answer 1

As usual, what is a pain to achieve with traditional CSS (float, margin, inline-block, etc.) is a breeze with 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>

Answer 2

你应该使用Flexbox减轻痛苦。尝试制作你的

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

有关flexbox的更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

vertical-align: top设置通常会将div元素对齐并定位到顶部，在您的情况下，＆＃34;管理员＆＃34;文本。

您需要将html更改为（检查以下代码中的第二个<div>标记以进行更改），

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

希望这有帮助！

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

3 个答案: