I am trying to centre the link with the image, but can't seem to move the content vertically in any way.
<h4>More Information</h4>
<a href="#" class="pdf">File Name</a>
The icon is 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;
}
This question is related to
css
css-content
I think a cleaner approach is to inherit the 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;
{
This way the icon will align properly in any resolution/font-size combination. Great for use with icon fonts.
Using flexboxes did the trick for me:
.pdf:before {
display: flex;
align-items: center;
justify-content: center;
}
Messing around with the line-height attribute should do the trick. I haven't tested this, so the exact value may not be right, but start with 1.5em, and tweak it in 0.1 increments until it lines up.
.pdf{ line-height:1.5em; }
I just found a pretty neat solution, I think. The trick is to set the line-height
of image (or any content) height
.
Using CSS:
div{
line-height: 26px; /* height of the image in #submit span:after */
}
span:after{
content: url('images/forward.png');
vertical-align: bottom;
}
That would probably also work without the span.
This is what worked for me:
.pdf::before {
content: url('path/to/image.png');
display: flex;
align-items: center;
justify-content: center;
height: inherit;
}
I spent a good amount of time trying to work this out today, and couldn't get things working using line-height or vertical-align. The easiest solution I was able to find was to set the <a/> to be relatively positioned so it would contain absolutes, and the :after to be positioned absolutely taking it out of the flow.
a{
position:relative;
padding-right:18px;
}
a:after{
position:absolute;
content:url(image.png);
}
The after image seemed to automatically center in that case, at least under Firefox/Chrome. Such may be a bit sloppier for browsers not supporting :after, due to the excess spacing on the <a/>.
I'm no CSS expert, but what happens if you put vertical-align: middle;
into your .pdf:before
directive?
I had a similar problem. Here is what I did. Since the element I was trying to center vertically had height = 60px, I managed to center it vertically using:
top: calc(50% - 30px);
You can also use tables to accomplish this, like:
.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 to accomplish this:
.pdf {
display: flex;
}
.pdf:before {
display: flex;
align-items: center;
}
Here is an example: https://jsfiddle.net/ctqk0xq1/1/
Source: Stackoverflow.com