Unable to center :before image in div with other content

Question

I'm trying to vertically center a image in a :before pseudo element. I've found a few questions about it here (and other places), but unfortunately I'm unable to make it work with those tips.

I want to center the image to come between the to lines of text:

A js-fiddle:

http://jsfiddle.net/kaze72/vb5z4/1/

<div class="body">
    <div class="welcomeHeader">         
        <h3>Welcome</h3>
        <h6>Adam Testorsson</h6>
    </div>
    <p>other stuff</p>
</div>

Main css:

.welcomeHeader {
    padding-left: 30px;
    display: inline-block;
}

.welcomeHeader:before {
    background-image: url('http://www.ronnebybloggen.se/pics/apml.png');
    /* background-position: 0px -20px; */
    display: inline-block;
    content: ' ';
    vertical-align: -50%;
    width: 12px;
    height: 12px;
    margin-left: -22px;
    margin-top: -3px;
}

`vertical-align` won't work as you're trying to allign it with two block level headings...and in any case (-505) is invalid in that property. — Paulie_D, May 23 '14 at 09:48
I got -50% from this: http://stackoverflow.com/questions/2833027/vertically-aligning-css-before-and-after-content , but the tip does not work for me. — kaze, May 23 '14 at 09:51

enguerranws · Accepted Answer · 2014-05-23T10:07:25.397

There it is : http://jsfiddle.net/vb5z4/5/

This solution is based on background-position : I made the :before element to make 100% height of its parent, and set its background to be at its vertical center.

.welcomeHeader {


   padding-left: 30px;
    display: inline-block;
    position: relative; // Need the parent to be relative
}

.welcomeHeader:before {
    position: absolute; // :before becomes absolute
    top: 0;
    left: 0;
    background-image: url('http://www.ronnebybloggen.se/pics/apml.png');
    background-repeat: no-repeat; // don't repeat background
    background-position: left center;
    display: inline-block;
    content: ' ';

    width: 12px;
    height: 100%;
    margin-left: -22px;
    margin-top: -3px;
}

* {
    font-size: 13px;
    margin: 5px;
}

The good point in this technique is that even if you change the background, it will still be vertically centered, no need to fix a negative margin (that depends on image height).

+1 clean approach. Negative margins are not required, however. absolutely positioned elements must ideally be positioned using top/left. — Abhitalks, May 23 '14 at 09:57

score 0 · Answer 2 · answered May 23 '14 at 09:51

0

Added position:relative; to .welcomeHeader. Remove margins and add these in .welcomeHeader:before

position: absolute;
    top: 50%;
    left: 0;
    margin-top: -6px;

I have updated you fiddle. Check it out.

answered May 23 '14 at 09:51

abir_maiti

490
3
9

score 0 · Answer 3 · answered May 23 '14 at 09:52

If you still wish to use the pseduo element it would be preferable to use absolute position on that.

JSfiddle Demo

HTML

<div class="body">
    <div class="welcomeHeader">         
        <h3>Welcome</h3>
        <h6>Adam Testorsson</h6>
    </div>
    <p>other stuff</p>
</div>

CSS

.welcomeHeader {
    padding-left: 30px;
    display: inline-block;
    position: relative;
}

.welcomeHeader:before {
    background-image: url('http://www.ronnebybloggen.se/pics/apml.png');
    /* background-position: 0px -20px; */
    content: ' ';
    width: 12px;
    height: 12px;
    position: absolute;
    top:50%;
    margin-top: -6px; /* half of height */
    left:0; /* or someother required value */

}

* {
    font-size: 13px;
    margin: 5px;
}

h6 {
    font-weight: normal;
}

Unable to center :before image in div with other content

3 Answers3