0

I would like to vertically align text next to an image in a before pseudo-element.

The way it's working now is that my image is displayed to the left of my text, but both the image and text sit on the same baseline. I tried using vertical-align, but it didn't work. I think the issue is that content is treating both the image and text as one block element.

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #000000;
}

header {
  background-color: #202830;
  color: #ffffff;
  width: 100%;
}

header::before {
  align-items: center;
  background-color: #581845;
  color: #E88968;
  justify-content: center;
  content: url("https://stackoverflow.com/favicon.ico") " This is some text";
  display: flex;
  height: 72px;
  width: 100%;
}

p {
  padding: 16px;
}
<header>

  <p>This is my header</p>

</header>

In the snippet, you can see that "This is some text" is aligned with the baseline of the image. I want it to be centered with the image.

Update: This code works in Firefox 82.0.3 (32-bit) on Windows 10, but does not work in Chrome 86.0.4240.198 (64-bit) on Windows 10 or Edge 87.0.664.47 (64-bit) on Windows 10.

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
Frank
  • 2,050
  • 6
  • 22
  • 40
  • Here's a link to the fiddle so you can see the problem: https://jsfiddle.net/3w4cp087/ – Frank Nov 25 '20 at 18:33
  • https://jsfiddle.net/1cpLv23f/ looks fine ?? https://i.stack.imgur.com/LncfJ.jpg – G-Cyrillus Nov 25 '20 at 18:38
  • @G-Cyrillus It's centered in the element, but I would like the text to be vertically aligned to be centered with the Stack Overflow icon. Right now the text is aligned with the baseline of the icon. – Frank Nov 25 '20 at 18:40
  • https://i.stack.imgur.com/LncfJ.jpg is this what you see ? if not, what browser are you using ? – G-Cyrillus Nov 25 '20 at 18:41
  • That's what I want to see, but in my browser, Chrome Version 86.0.4240.198 (Official Build) (64-bit) Windows 10, I'm still seeing the text aligned with the baseline. It works fine in Firefox. – Frank Nov 25 '20 at 18:44
  • This question is clearly about aligning text and images in the CSS content property of a before pseudo element. Why would they close it as a duplicate of a totally unrelated question. If I had an img and a p that needed to be aligned this wouldn't be an issue. The issue is that it's all mixed into a content property. Apparently Firefox can handle this, but Chrome doesn't. – Frank Nov 25 '20 at 18:49
  • you might split img & text into two pseudos : https://jsfiddle.net/895mxw32/ (tricked to look alike expected in chrome) – G-Cyrillus Nov 25 '20 at 18:59
  • Or put the image into background (you might want to position it with rem rather than px) https://jsfiddle.net/qkh1re4w/1/ – Nadia Chibrikova Nov 25 '20 at 19:02
  • @NadiaChibrikova, I like that solution, but if the text changes I'd have to manually adjust the position of the background image. That's a deal breaker. – Frank Nov 25 '20 at 19:51
  • @G-Cyrillus, you got it to work with that fiddle, but it wasn't using only the content property of the before pseudo-element. – Frank Nov 25 '20 at 19:56
  • @NadiaChibrikova, for now I am going with your solution to put it in the background. Rather than trying to `justify-items:center`, I'm just going to left align the content and add padding to prevent the text from overlapping the image. Thanks for this solution. I'd still like to see if anyone else has a way to treat the image and text in the `content` property as two separate elements and align them independently. – Frank Nov 25 '20 at 20:07
  • looks like a chrome bug, a few options: wait until it is fixed, avoid to trigger it, use a work around. (bg or 2 pseudos to disconnect img and text) :) – G-Cyrillus Nov 25 '20 at 20:17
  • You could position the text and image together in the center if you could make them small and get background colour from another element (:after or a top border of the main element). Can't think of anything better... – Nadia Chibrikova Nov 25 '20 at 20:40

1 Answers1

0

By using ::before selector, you can't align your contents as both the image and the text are used in the content property one after another. Instead of using ::before selector, you can try putting the image and the text separately in a div tag in html and then you can align your text or image individually by using position and top properties in css.

If there's some sort of strict instructions to you that you have to use ::before selector, I'm sorry to say that you can't align your contents like that.

Another way: You can try editing your picture by cropping some extra empty space in your image (if any) below the logo.

Dharman
  • 30,962
  • 25
  • 85
  • 135
Pritam Dash
  • 1
  • 2
  • That is what I thought, however, interestingly enough, Firefox treats the image and text as two separate elements. It's just Chrome and Edge that treat them as one. – Frank Nov 25 '20 at 19:58