0

Please could someone help me with this, I'm past the stage of pulling my hair out and don't want to end up bald!

Having searched SO, read about and tinkered with inline / inline-block, float, line-height & font-size properties for > several days, I have an issue which I still simply cannot understand - aligning the baselines of two text elements.

I'm creating a simple(ish) button with an image and two text elements: heading and label. I would like the text elements separated in adjacent SPANS with heading and label in different FONT-SIZES (aiming for label to be right-aligned).

I just want the text in the adjacent spans to be vertically centred within the line height but sit on a common baseline. The trouble is even when I get close using the methods mentioned below, I am still seeing differing results on various browsers (Opera in particular). I am reluctant to get into browser-specific CSS adjustments because the results seem to vary slightly in almost every browser.

Everything else seems to be fine, so I've stripped out the unnecessary elements of code (along with various failed efforts at getting the baselines aligned, such as line-height, vertical-align, padding, margin etc etc). So I realise what I have isn't going to work as is. I also exaggerated the difference in font-size to show the problem more clearly.

I apologise if this question is as old as time itself, but nothing I have found here on SO seems to solve my problem.

CSS:

.sn-border {
position: relative;
display: block;
width: 237px;
height: 25px;
border-bottom: 1px solid #54534A;
overflow: hidden;
}
.sn-border span { display: block;  overflow: hidden; }
.sn-label { width: 100%; line-height: 25px; }
.sn-title, .sn-tag { float: left; }
.sn-title { width: 165px; font-size: 14px; color: #54534A; }
.sn-tag { width: 72px; font-size: 8px; text-align: right; color: #8C8C8C; }

Markup:

<a href="#" class="sn-border">
<span class="sn-label">
<span class="sn-title">Example Heading 001</span>
<span class="sn-tag">Example Label</span>
</span>
</a>

JSFiddle: http://jsfiddle.net/sRLyM/

I'm sure this must be simple but I have tried EVERYTHING i can think of, read every link i can find relating to the subject - all to no avail. Any help would be greatly appreciated.

Stef U
  • 1
  • 1
  • 1

1 Answers1

0

I'm not sure if I understood what you're looking for, so let me know if I'm mistaken. I think you need to make height-line equal to height of your outer element.

eJsfiddlehttp://jsfiddle.net/sRLyM/1/

monika
  • 489
  • 1
  • 7
  • 17
  • Hi and thanks for your reply. I checked the JSfiddle and it's not what i was looking for, but appreciate your help... think I over elaborated in my explanation. – Stef U Apr 12 '13 at 21:34
  • sorry it wouldn't let me edit previous.. Thanks for your reply - I think I over elaborated in my explanation somewhat. I checked the link & it's not what I needed; I have already tried line-height: 25px on both inner spans / outer span to no avail. I have an outer span I want to be 25px high, inside this are 2 more spans - both floated, one left with 14px font-size and one right with 8px font-size. I would like both centred vertically within the 25px line-height, but on the same baseline so they don't look odd. I cannot seem to achieve this however I try... I hope that makes more sense. – Stef U Apr 12 '13 at 21:46