1

By default, an image in line with text is bottom-aligned with the bottom of the line, and top-aligned with the bottom of the previous line, which changes the text spacing:

enter image description here

I'd like to instead center the image on its line of text (e.g. using vertical-align:middle), but without distorting the spacing:

enter image description here

How can this be done in a way which is compliant with most browsers?

As a minimal example, consider this markup:

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8">
    <title>Example</title>
  </head>
  <body>
    <p>Some text</p>
    <p>Some text <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/38/Rect_Geometry.png/220px-Rect_Geometry.png" style="vertical-align:middle"> with an image </p>
  </body>
</html>
1''
  • 26,823
  • 32
  • 143
  • 200

4 Answers4

1

I can think of no specific places where this is a good idea. Only, I suppose, if the image is vertically shorter than the text. Otherwise, massacre of aesthetics.

Try making the image height 1em. Or 0.9 em.

shubniggurath
  • 956
  • 1
  • 15
  • 31
  • Perhaps if the image is at the end of the longest line of text? However, good point about resizing the image (though it's not what I'm going to do), +1. – 1'' Jul 16 '13 at 20:56
1

In your case I would do:

HTML:

<p>Some text</p>
<p>Some text <span class="mid-image"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/38/Rect_Geometry.png/220px-Rect_Geometry.png" style="vertical-align:middle" /></span> with an image</p>
<p>Some text</p>

CSS:

.mid-image {
    display: inline-block;
    zoom: 1;
    height: 1px;
}

.mid-image img {
    margin-top: -75px
}

Fiddle: http://jsfiddle.net/QgutY/1/

And then read: Inline block doesn't work in internet explorer 7, 6

Community
  • 1
  • 1
demux
  • 4,544
  • 2
  • 32
  • 56
1

Another solution:

HTML (no change):

<p>A line</p>
<p>Another line</p>
<p>Another</p>
<p>Your (possibly) long line <span class="img-container"><img id="image" src="http://image.org/" /></span></p>
<p>One more line</p>

CSS (using positioning):

.img-container {
    height: 0px;
    position:absolute;
}

#image {
    margin-left: 1em;
    position: relative;
    bottom: 63px;
}

Notice both solutions need to know the size of the image.

My solution, (using "position: absolute;") require knowing the width of the image to add text after it.

To do that, we just have to add another span with a padding equal to the width of the image, see codePen: http://codepen.io/loxaxs/pen/mjFxJ/

loxaxs
  • 2,149
  • 23
  • 27
  • I actually just found out about this trick myself. Though perhaps you mean to switch the absolute and relative positions? – 1'' Jul 16 '13 at 22:12
  • "to switch ... positions". I don't understand. In my code, the "position: relative;", just allow to manually centre the image. (using "bottom: ...px"). – loxaxs Jul 16 '13 at 22:34
  • Sorry, I mean making the image container relative and the image absolute. – 1'' Jul 16 '13 at 22:47
0

By changing img tag position to absolute you can fix it.

img {
    position: absolute;
    top: 50%;
}

Updated Fiddle

Praveen
  • 55,303
  • 33
  • 133
  • 164