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

1
point

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

The HTML

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

The CSS

 .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 over 6 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 over 6 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 over 6 years ago
  • Could you show me in image of what you mean? I don't think I know what you mean :/ Marko Ivanovski over 6 years ago
0
points

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

Answered over 6 years ago by Nathan Duran
0
points

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

Answered over 6 years ago by Muhammad Yoosuf
0
points

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.

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

and the css:

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

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

h1 span {
    vertical-align: baseline;
}
Answered over 6 years ago by Rowan Nairn
Doug 1095
0
points

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 over 6 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 over 6 years ago