ansaurus

Question

How to vertically align an inline image with inline text following it?

Answer 1

A:

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;
}

LeguRi 2010-06-11 17:47:16

Then the same problem with hardcoding pixel values appears - I hold no guarantees about the width of the logo image. It may be scaled as part of browser rendering... Would that not mess up the layout above? Of course, I just may have to bite the bullet here...

amn 2010-06-11 17:57:28

I don't think that would be an issue; the text size differs, but the image size doesn't... ?

LeguRi 2010-06-11 18:02:29

@downvoter - Thanks; I missed a big mistake in my CSS selector. (whoops!)

LeguRi 2010-06-11 18:24:48

I'm the downvoter : it was my mistake first and then what I believe is a bug from SO that blocked me from un-downvoting you. You had to edit in order to authorize me to un-downvote. Sorry!

Felipe Alsacreations 2010-06-11 18:30:50

@Felipe - np; like I said there was an error in my CSS which I hadn't caught :D

LeguRi 2010-06-11 18:42:35

@Richard JP Le Guen - Fantastic, even *you* can learn from my mistakes :)

Felipe Alsacreations 2010-06-11 19:02:04

Answer 2

A:

Vertical-align only aplies to table-cell elements. you can add a display:table-cell to "a.facebook"

Poliveira 2010-06-11 17:48:10

Would that work in a typical browser?

amn 2010-06-11 17:56:13

IE7 and below won't understand that. I can't remember for IE8. @Poliveira vertical-align applies to block and inline-block too.

Felipe Alsacreations 2010-06-11 18:26:05

... does IE7 respect `:before` rules?

LeguRi 2010-06-11 18:43:32

Answer 3

A:

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"&gt;
<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

Felipe Alsacreations 2010-06-11 18:23:18

Answer 4

A:

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>

Richard Poole 2010-06-11 18:37:40

ansaurus

tags:

views:

answers:

How to vertically align an inline image with inline text following it?

related questions