CSS vertical alignment: before and: after content

Question

I try to center the link with the image, but I can’t move the content vertically.

<h4>More Information</h4> <a href="#" class="pdf">File Name</a> 

Icon 22 x 22px

 .pdf { font-size: 12px; } .pdf:before { padding:0 5px 0 0; content: url(../img/icon/pdf_small.png); } .pdf:after { content: " ( .pdf )"; font-size: 10px; } .pdf:hover:after { color: #000; } 

Answer 1

Answered my own question after reading your tip on vertical alignment CSS attribute. Thanks for the tip!

 .pdf:before { padding: 0 5px 0 0; content: url(../img/icon/pdf_small.png); vertical-align: -50%; } 

Answer 2

I'm not a CSS expert, but what happens if you put vertical-align: middle; to your .pdf:before ? directive

Answer 3

You can also use tables for this, for example:

 .pdf { display: table; } .pdf:before { display: table-cell; vertical-align: middle; } 

Here is an example: https://jsfiddle.net/ar9fadd0/2/

EDIT: You can also use flex for this:

 .pdf { display: flex; } .pdf:before { display: flex; align-items: center; } 

Here is an example: https://jsfiddle.net/ctqk0xq1/1/

Answer 4

I think a cleaner approach is to inherit vertical alignment:

In html:

 <div class="shortcut"><a href="#">Download</a></div> 

And in css:

 .shortcut { vertical-align: middle; } .shortcut > a:after { vertical-align: inherit; { 

Thus, the icon will align correctly in any combination of resolution / font size. Great for use with icons.

Answer 5

A package with the line-height attribute should do the trick. I have not tested this, so the exact value may not be correct, but we start with 1.5em and adjust it in 0.1 increments until it aligns.

 .pdf{ line-height:1.5em; } 

Answer 6

I just found a pretty neat solution, I think. The trick is to set the line-height image (or any content) height .

text

CSS usage:

 div{ line-height: 26px; /* height of the image in #submit span:after */ } span:after{ content: url('images/forward.png'); vertical-align: bottom; } 

This will probably also work without a range.

Answer 7

I spent a lot of time solving this problem today, and could not get the work to work using linear height or vertical alignment. The easiest solution I could find was to set <a /> to be relatively positioned so that they contained absolutes, and also: after they were completely taken out of the stream.

 a{ position:relative; padding-right:18px; } a:after{ position:absolute; content:url(image.png); } 

After that, the image seemed to automatically center in this case, at least under Firefox / Chrome. This might be a bit of a sloppier for browsers that don't support: after, due to the excessive interval on <a />.

Answer 8

I had a similar problem. Here is what I did. Since the element that I was trying to center vertically had a height = 60 pixels, I was able to center it vertically using:

top: calc (50% - 30px);