Alignment image using css selector

Question

I am trying to use CSS selector :before to put image before text. This is my snippet

But it seems the alignments is a bit off. Text is not vertically aligned with the image.

.resource {
  color: #007f00;
    display: inline;
    margin-top: 20px;

}
.resource:before {
 content: '';
    width: 26px;
    height: 20px;
    display: inline-block;
    margin-right:5px;
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: 19px;
    background-image:url("https://www.w3schools.com/bootstrap/cinqueterre.jpg");

}

<div class="resource">Presentation</div>

I have added margin-top in :before but it didn't work. Any help would be appreciated.

score 4 · Accepted Answer · edited Apr 17 '19 at 12:58

4

One way to accomplish your goal is to use a Flexbox and align-items: center. This will align all items vertically centered. You can also remove your margin-top:

.resource {
  color: #007f00;
  display: flex;
  align-items: center;
}

.resource:before {
  content: '';
  width: 26px;
  height: 20px;
  margin-right: 5px;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("https://www.w3schools.com/bootstrap/cinqueterre.jpg");
}

<div class="resource">Presentation</div>

But it would be interesting to know why you put your image as a ::before element...

edited Apr 17 '19 at 12:58

Aaron3219

2,168
4
11
28

answered Apr 17 '19 at 12:44

So am I! But it's the code I had received from the client. I wonder if this flexbox would work in IE. – Ali Rasheed Apr 17 '19 at 12:49
1

Yes it does. https://caniuse.com/#search=align-items – Aaron3219 Apr 17 '19 at 12:51

Hiren Vaghasiya · Answer 2 · 2019-04-17T12:52:17.050

2

Set .resource display: inline-block; and remove margin-top from .resource and :before and Add vertical-align:middle with line-height

.resource {
  color: #007f00;
  display: inline-block;
  line-height: 20px;
  vertical-align: middle;
}
.resource:before {
 content: '';
    width: 26px;
    height: 20px;
    display: inline-block;
    margin-right:5px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image:url("https://www.w3schools.com/bootstrap/cinqueterre.jpg");
    line-height: 20px;
    vertical-align: middle;
}

<div class="resource">Presentation</div>

edited Apr 17 '19 at 12:52

answered Apr 17 '19 at 12:45

Hiren Vaghasiya

5,454
1
11
25

1

It is an approach but this approach does not align items *perfectly* centered. You can see that by inspecting the elements and comparing @ProX's result and yours. – Aaron3219 Apr 17 '19 at 12:49
@Aaron3219 yes by giving line-height and vertical-align:middle to resource it is perfect center. – Hiren Vaghasiya Apr 17 '19 at 12:53
1

No it isn't perfectly centered. Compare both results. The text is 1-2px above the center. Expand the snippets in two tabs and switch between them. You will see the difference and if you inspect it closer you can also see that the text is not perfectly centered. – Aaron3219 Apr 17 '19 at 13:02
Yes... you can see it. That is why I liked @Aaron3219 approach. – Apr 17 '19 at 13:03

score 0 · Answer 3 · answered Apr 17 '19 at 12:58

If you change your HTML and CSS as the following, then you can achieve the same result more efficiently:

.resource {
  display: flex;
}

span {
  margin-right: 5px;
  margin-top: 19px;
}

span img {
  height: 20px;
  width: 26px;
}

<div class="resource">
  <span><img src="https://www.w3schools.com/bootstrap/cinqueterre.jpg"/></span>
  <span>Presentation</span>
</div>

Here is a link to JSFiddle where you can see the result too.

Alignment image using css selector

3 Answers3