CSS - image before alignment problems

Question

Hi all I have an h2 element like so:

<h2 id="back">Back</h2>

and I added an image before:

#back::before {
    background-image: url(/images/arrow.png);
    background-size: 20px 30px;
    display: inline-block;
    width: 30px;
    height: 40px;
    content: "";
    background-repeat: no-repeat;
    background-position: center;
}

However the output is the screenshot attached...my question is how do I get my arrow to be aligned in the middle and before the text. How would I do that?

score 2 · Answer 1 · answered Sep 12 '19 at 18:29

2

You can simply do this with flex:

#back{
display: flex;
align-items:center;
justify-content:center;
....
}
#back::before{
width: 20px;
height: 20px;
rest of your styling
}

answered Sep 12 '19 at 18:29

alex067

2,646
1
8
16

9841pratik · Answer 2 · 2019-09-12T18:13:13.780

0

#back::before {
    background-image: url(/images/arrow.png);
    background-size: 20px 30px;
    display: inline-block;
    width: 30px;
    height: 40px;
    content: "";
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
}

Try vertical align property.

edited Sep 12 '19 at 18:13

answered Sep 12 '19 at 18:11

9841pratik

187
7

I dont see vertial align in your code....unless I am blind – user979331 Sep 12 '19 at 18:12
oops, now you see right there. – 9841pratik Sep 12 '19 at 18:13

CSS - image before alignment problems

2 Answers2