I need to align the baseline of some text with a baseline in an adjacent logo. Say the logo baseline is 30px from the top of the image, which I have floated to the left. Is it possible to accurately position the baseline of my text to also be 30px down from the top of the image?

5 answers


You could try using the align="baseline" property on the image, but here's how I would do it.


<div class="img-wrap">
    <img src="path-to-img" alt="" width="30" height="30" />
    <span class="img-desc">My image description</span>


 .img-wrap {
        float: left;
        position: relative;
        width: 300px; /* or whatever width you need */
        .img-wrap .img-desc {
            display: block;
            position: absolute;
            bottom: 0;
            left: 30px;
            padding: 0 5px;

This way even if the text wraps, it's bottom will always match with the image bottom (depending on the image height)

Answered almost 7 years ago by Marko Ivanovski
  • To clarify: in both cases it's the baseline I'm interested in not the bottom. Baseline of text in image should be aligned with *baseline* of adjacent text. Thanks for trying though. Rowan Nairn almost 7 years ago
  • I like your align=baseline idea. There's something in that. Maybe I can chop up the image and use that somehow. Rowan Nairn almost 7 years ago
  • Could you show me in image of what you mean? I don't think I know what you mean :/ Marko Ivanovski almost 7 years ago

line-height is the closest you can get to an actual baseline grid.

Answered almost 7 years ago by Nathan Duran

line-height is allways good way of using for baseline fix

Answered almost 7 years ago by Muhammad Yoosuf

Here's how I did it. I broke the image up into a top and bottom half at the baseline of the logo. The top half I align to the baseline of the text. The bottom half I position absolutely so it's in the right place to match up with the top.

    <img src="logotop.png" width=100 height=30>
    <img src="logobottom.png" class="bottom" width=100 height=20>
    <span>The text goes here</span>

and the css:

h1 {
    position: relative;
    margin-bottom: 20px;

h1 .bottom {
    position: absolute;
    top: 30px;
    left: 0;

h1 span {
    vertical-align: baseline;
Answered almost 7 years ago by Rowan Nairn
Doug 1095

Rowan, looks like your answer should work, but breaking up the image has its own drawbacks, of course. Another approach would be to make the text a block-level element and set the height of the text to align it to the pseudo-baseline in the image.

Answered almost 7 years ago by Doug
  • I don't really understand. Could you expand on that? By height you mean line-height? I don't see how I can do that without knowing the exact dimensions of the font. Rowan Nairn almost 7 years ago