CSS vertical align objects :before - css

Question

On my website www.drivkrets.se I´m trying to insert a symbol (orange lines) before my headings using CSS :before. I´have been able to insert the image in the right size but now I would like to vertical align the symbol image with the text. When the heading is on one line or three lines I doesn´t look good. I´ve tried different variations of code but none of them works.
Does anyone have any idea how I should do this?
The headings that suppose to have this symbol before I´ve named ".specialrubrik". Now I´m using the code:
.specialrubrik:before {
content:url('http://www.drivkrets.se/wp-content/uploads/2017/03/orange-
marker-e1490098005864.png');
float: left;
margin-right: 12px;
display: inline-block;
vertical-align: middle;
height: 100%;
}
Best regards
Peter

Answer 1

This is a CSS question and has nothing to do with WordPress. You don't want to float inline-block elements, and vertical-align only works with display: inline-block elements.
.example-heading:before {
display: inline-block; /* no floats! 'middle' only works with inline-block */
content:url('http://www.drivkrets.se/wp-content/uploads/2017/03/orange-marker-e1490098005864.png');
vertical-align: middle;
margin-right: 12px;
}
<h2 class='example-heading'>Example heading</h2>

Answer 2

Thanks for your idea #sheriffderek. I still don´t get it right.
I´ve changed the code now and trying to use the :before on h2 instead.
h2:before {
content:url('http://www.drivkrets.se/wp-content/uploads/2017/03/orange-
marker-e1490098005864.png');
margin-right: 12px;
display: inline-block;
vertical-align: middle;
height: 100%;
}
h2 {
text-align: left;
display: -webkit-inline-box;
vertical-align: middle;
}
It works when I have a short heading but if the heading is two or three rows it looks strange. Example: "Kunskap och uppfinningsrikedom till era elsystem". Do you know how I can make all of the text to flow right of the symbol?
Peter