CSS ::after styling affecting vertical alignment

Question

I have three lines of text describing a user, which are centrally aligned.

Now I seek to add an icon to the username, which I have done using ::after styling in CSS (see below).

However, this then is considered when centering the first line. What I'd ideally like is for the username to be aligned centrally with the rest of the text and to then place the icon to the right of that without affecting the alignment at all.

How can I do this?

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>

(part of my) 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;
}

@TemaniAfif Unfortunately, that just causes the icon to disappear :/ — Ben Derby, Mar 26 '20 at 23:55

IndustryDesigns · Accepted Answer · 2020-03-27T00:02:44.327

In the same way you used flex to align your user elements, you can do the same with the <p> element within username.

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

This will ensure that all the elements within the .username p {} element will be aligned vertically. Be aware, this is only the case if the flex-direction of your element is default, to flex-direction: row. If, for any reason however, you were using flex-direction: column you would use justify-content: center for vertical alignment.

P.s I often use https://fontawesome.com/ to get icons. Using their inline <i> icon elements as siblings of text, wrapped with a flex parent, often makes for a nice, clean look too. For instance

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

@BenDerby this will give different result from what you are showing, you should make your question more clear then — Temani Afif, Mar 27 '20 at 00:10

score -1 · Answer 2 · answered Mar 26 '20 at 23:54

-1

Use more <div>s and use <img> tags for images. So the code should look something like this

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

answered Mar 26 '20 at 23:54

Fintan Roche

1
3

How do I then position than img next to the username? I am not using bootstrap and then CSS grid has one column in my case. – Ben Derby Mar 26 '20 at 23:59

CSS ::after styling affecting vertical alignment

2 Answers2