时间戳

首页 > 解决方案 > CSS ::after 样式影响垂直对齐

html - CSS ::after 样式影响垂直对齐

问题描述

显示问题的图像

显示所需结果的图像

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

现在我试图为用户名添加一个图标，我已经在 CSS 中使用 ::after 样式完成了这个操作（见下文）。

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

我怎样才能做到这一点？

HTML

              <div class="user-name">
                <p> David Wood </p>
              </div>
              <p class="user-type"> Teacher </p>
              <p class="user-email"> d.wood@school.ac.uk</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;
}

标签： htmlcss

解决方案

与您用于flex对齐用户元素的方式相同，您可以对<p>用户名中的元素执行相同的操作。

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

这将确保元素内的所有.username p {}元素都垂直对齐。请注意，只有当flex-direction您的元素的 是默认值时，才会出现这种情况flex-direction: row。但是，如果出于任何原因，您正在使用flex-direction: column您将justify-content: center用于垂直对齐。

Ps 我经常使用https://fontawesome.com/来获取图标。使用它们的内联<i>图标元素作为文本的兄弟元素，用 flex 父元素包裹，通常也会带来漂亮、干净的外观。例如

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

推荐阅读