How to Center a Line of Text Relative to an Image with CSS/HTML
It can be confusing to try and center inline text vertically.
Imagine you are trying to place a logo next to a line of text, and you want these two to be centered relative to each other. Take the text and the logo in the image below, for example:
A way to center these that worked for me is to place the line of text within a <span> tag (while the logo is an image tag) and place both of them within a div.
The div’s height should then be specified. It doesn’t matter what the value is, but it will be helpful to know what it is.
The line height properties for the CSS of the span should then be set equal to the height of the div height. For example, if the div height is 50px, set the line-height of the <span> to 50px as well. This should center the line of text within the div. (By the way, it is helpful to give the div a different background color than the rest of the background, so you can see the space you’re working in). If the line is not centering properly, you can try increasing or decreasing the line-height.
To center the logo, you want to give the logo an id (e.g. ‘LinkedIn_logo’) and give it the ‘display’ property of ‘inline-block’ in the CSS document. Then, the ‘vertical-align’ property can be used to adjust the placement. The vertical-align property can actually be given numerical values (such as ‘em’), instead of values like ‘top’, ‘middle’, etc. This will give you more control over your plaement. If the logo is not perfectly centered, you can simply adjust the value.
And that’s it! If you have questions on how this method works, please email me at