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>