Html CSS:：影响垂直对齐的样式设置之后

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

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

但是，当第一条线居中时，应考虑这一点。理想情况下，我希望用户名与文本的其余部分集中对齐，然后将图标放在右侧，而不影响对齐

我该怎么做

HTML

对图像使用更多的

s和

标记。所以代码应该是这样的

<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"> d.wood@school.ac.uk</p> </div>

用户名
教师
d。wood@school.ac.uk

与您使用

flex

对齐用户元素的方式相同，您可以对username中的

元素执行相同的操作

.username p {
  display: flex;
  align-items: center;
}

这将确保

.username p{}

元素中的所有元素将垂直对齐。请注意，只有当元素的

flex-direction

默认为

flex-direction:row

时，才会出现这种情况。但是，如果出于任何原因，您使用的是

flex-direction:column

，那么您将使用

justify-content:center

进行垂直对齐

我经常用它来获取图标。将它们的内联

图标元素作为文本的兄弟元素，并用flex父元素包装，通常也会带来一个漂亮、干净的外观。比如说

<a class="flex-container"><i class="fas fa-users"></i>Buy</a>

购买

使其处于以下位置：absolute@TemaniAfif不幸的是，这只会导致图标消失：/I然后如何将img定位在用户名旁边？我没有使用引导，然后CSS网格在我的例子中有一列。@BenDerby这将给出与您显示的不同的结果，您应该让您的问题更清楚

.username p {
  display: flex;
  align-items: center;
}

<a class="flex-container"><i class="fas fa-users"></i>Buy</a>