How to vertically align an inline image with inline text following it?
Is there any way to vertically align an image element generated by a "conten开发者_运维百科t" property as part of a ":before" selector, next to adjacent inline text? In other words, I have
<a href="..." class="facebook">Share on Facebook</a>
As I don't want to pollute my markup with unnecessary IMG elements that only have to do with style, I resort to adding a small icon to the left of the link, via CSS (except that it does not align properly, hence the question):
a.facebook:before
{
content: url(/style/facebook-logo.png);
}
I tried adding a "vertical-align: middle" (one of the most notoriously difficult aligning concepts to grasp in CSS, in my opinion, is that very property) but it has no effect. The logo aligns with text baseline, and I don't want to hardcode pixel offsets, because frankly text size differs from browser to browser, etc. Is there any solution for this?
Thanks.
Vertical-align only aplies to table-cell elements. you can add a display:table-cell to "a.facebook"
Personally, instead I'd use a background-image:
HTML:
<a href="..." class="facebook">Share on Facebook</a>
CSS:
a.facebook
{
background-image: url(/style/facebook-logo.png);
background-position: TOP LEFT;
background-repeat:NO-REPEAT;
padding-left:20px; /* or whatever the width of facebook-logo.png is */
}
If you're really married to the idea of using :before then you can use positioning:
a.facebook
{
position:relative;
top:0px;
left:0px;
padding-left:20px; /* or whatever the width of facebook-logo.png is */
}
a.facebook:before
{
content: url(/style/facebook-logo.png);
position:absolute;
top:0px;
left:0px;
}
I'd add a few transparent pixels above (or below) the logo, it's the simplest thing to do with images.
Otherwise you can play with line-height, but I wish you good luck to understand clearly what you're doing ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Aligning generated content vertically</title>
<style type="text/css" media="screen,projection">
a, a:before {
/*display: inline-block;*/
}
a {
vertical-align: super;
line-height: 3;
background-color: yellow;
border-top: 1px solid darkred;
border-bottom: 1px solid red;
}
a:before {
vertical-align: bottom;
line-height: 1;
content: 'bottom :';
}
</style>
</head>
<body>
<div>
<p><a href="#">Share sth with people you didn't think they'd have access to it</a></p>
</div>
</body>
</html>
You can uncomment display: inline-block; too
Line-height and a background-image will get you what you want:
CSS:
a.share-on-facebook {
background: url(facebook.png) no-repeat top left;
line-height: 40px; /* height of facebook logo */
padding-left: 40px; /* width of Facebook logo */
}
Mark-up:
<a class="share-on-facebook" href="...">Share on Facebook</a>
加载中,请稍侯......
精彩评论