CSS ::影响垂直对齐的样式后

Question

显示问题的图像

显示所需结果的图像

我有三行描述用户的文本，它们居中对齐。

现在，我试图向用户名添加一个图标，这是我在 CSS 中使用 ::after 样式完成的（见下文）。

但是，在将第一行居中时会考虑这一点。我理想的情况是用户名与文本的其余部分居中对齐，然后将图标放置在其右侧，而完全不影响对齐。

我怎样才能做到这一点？

超文本标记语言

             <div class="user-name">

                <p> David Wood </p>

              </div>

              <p class="user-type"> Teacher </p>

              <p class="user-email"> [e-mail]</p>

（我的一部分）CSS

.user-name p::after {

  content: '';

  background: url('homeimages/dropdown-black.png') left center no-repeat;

  vertical-align: middle;

  background-size: 10px auto;

  padding-left: 20px;

  padding-top:-20px;

  white-space:pre;

}

Answer 1

按照与对齐用户元素相同的方式flex，您可以对用户名中的元素执行相同的操作<p>。.username p {   display: flex;   align-items: center; }这将确保元素内的所有元素都.username p {}垂直对齐。flex-direction请注意，只有当元素的 是默认值 to时才会出现这种情况flex-direction: row。但是，如果出于任何原因，您正在使用flex-direction: column您将用于justify-content: center垂直对齐。

Answer 2

使用更多的<div>s 并<img>为图像使用标签。所以代码应该是这样的<div class="col-md-6">User Name</div><div col-md-6><img></img><div col-md-6> <p class="user-type"> Teacher </p> </div><div col-md-6> <p class="user-email"> [e-mail]</p> </div>