[Apfhex]

I'm trying to position some text inside a box, and I'd like to be able to either align it vertically to the center or to the bottom of the box, but I don't seem to be having any luck with that.



Example 1 is what it looks like now. Examples 3 is what I'd LIKE it to look like, but if aligning it like that can't be done then I want it centered like in example 2. The white box won't be so high in the final design, I merely expanded it here to highlight my dilemma. In the end, the box needs to be a fixed hight because of a background image that won't look good repeated vertically. If this proves to be too troublesome, I'll just make what I want in Photoshop, but I want to avoid that if possible, since I have a number of headers like this on the page.

I've tried vertical-align: baseline, vertical-align: bottom, vertical-align: text-bottom, and others, none had any effect. The text is a div enclosed in another div (the white box). I should also note that the text is much closer to the top of the box in other browsers, like Firefox (I'm using Safari), which doesn't look good at all.

[registered_user]

Use line-height on the text.

Set the line-height to the same height as its container to center it, reduce line-height to pull the text up a bit.

[Apfhex]

I see. That works great for centering it in Safari, though Firefox and IE seem to still shift the text up a bit from the center. Is that just a rendering quirk I'll have to deal with? It doesn't ruin the design, it just looks a bit off.

[Simon Mundy]

Originally posted by Apfhex:
I see. That works great for centering it in Safari, though Firefox and IE seem to still shift the text up a bit from the center. Is that just a rendering quirk I'll have to deal with? It doesn't ruin the design, it just looks a bit off.

What happens if you apply a larger top margin (9 - 12px) and then a negative margin for the bottom (-6 - -12px). Try playing around with that to see if that solves your problem. You may even want to specify that value in ems or pt to have it stay consistent regardless of the user-defined font size.

[Apfhex]

Adding margins, oddly, seems to add space outside of both containers, rather than just around the one with the text. Changing sizes from pixels to points or ems looks just the same.

Here's what it looks like now


along with the relevant CSS

Code:
.headingbkg       {
	background-color: white;
	background-image:  url("headerbkg.png");
	margin-right:      8px;
	margin-bottom:     8px;
	margin-left:       auto;
	width:             561px;
	height:            23px }

.heading         {
	color:         #6699cc;
	font-size:      18px;
	font-weight:    bold;
	line-height:    23px;
	text-align:     right;
	text-transform: uppercase;
	margin-right:   20px }

Firefox/IE also render the text on the page in general a little differently, there's less space between lines. Maybe I can make it more uniform using CSS, but I was wondering if that would affect all this.

[Simon Mundy]

Originally posted by Apfhex:
Adding margins, oddly, seems to add space outside of both containers, rather than just around the one with the text. Changing sizes from pixels to points or ems looks just the same.

Here's what it looks like now


along with the relevant CSS

Code:
.headingbkg       {
	background-color: white;
	background-image:  url("headerbkg.png");
	margin-right:      8px;
	margin-bottom:     8px;
	margin-left:       auto;
	width:             561px;
	height:            23px }

.heading         {
	color:         #6699cc;
	font-size:      18px;
	font-weight:    bold;
	line-height:    23px;
	text-align:     right;
	text-transform: uppercase;
	margin-right:   20px }

Firefox/IE also render the text on the page in general a little differently, there's less space between lines. Maybe I can make it more uniform using CSS, but I was wondering if that would affect all this.

What about adding to .heading { margin-bottom: -8px; }

[Apfhex]

Originally posted by Simon Mundy:
What about adding to .heading { margin-bottom: -8px; }

No visible difference.

BTW, adding a line-height to my body element style made the text look the same on all browsers, but did nothing to the alignment of my heading text, which was the expected result.

[Simon Mundy]

Originally posted by Apfhex:
No visible difference.

BTW, adding a line-height to my body element style made the text look the same on all browsers, but did nothing to the alignment of my heading text, which was the expected result.

No worries. I've had a think about it and worked up an example:-

Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Untitled</title>
	<style type="text/css">
	body
	{
		font-size: 1em;
		font-weight:    bold;
		text-transform: uppercase;
		font-family: Verdana,sans-serif;
	}
	.heading_bg
	{
		position: relative;
		background-color: blue;
		margin-right:      8px;
		margin-bottom:     8px;
		width:             561px;
	}
	
	.number
	{
		display: block;
		float: left;
		color:         #6699cc;
		margin-right:   20px
	}
	.heading	
	{
		display: block;
		position: relative;
		color: #6699cc;
		font-weight: bold;
		text-align: right;
		text-transform: uppercase;
		margin-left: 20px;
		bottom: -0.2em;
	}
	</style>
</head>
<body>
<div class="heading_bg">
	<span class="number">1.</span><span class="heading">Heading<br />a</span>
<div>
</body>
</html>

It seems to work OK in Safari, Mozilla, IE5 and 6 so far. because it's in EMs and using relative positions, it should also stretch quite gracefully (I've even put a BR in there so you can see it works for multi-line headings).

You may need to put a 'clear' element in there somewhere to escape the float (especially for IE) but otherwise this should hold up for you.

[Apfhex]

Using your suggestion, I tweaked it a little and achieved even alignment on all browsers. Thanks!

A "bottom: -0.05em" gave me what I wanted. The float's not an issue, as I think you misunderstood my original example, in that the numbers were added in Photoshop so I could indicate which was which, they're not part of the site. ^^;

Now I've noticed that my PNG's show up a shade lighter in Firefox (and they don't have any embedded color profiles). -_-

[Simon Mundy]

Originally posted by Apfhex:
The float's not an issue, as I think you misunderstood my original example, in that the numbers were added in Photoshop so I could indicate which was which, they're not part of the site.

(smack!) Pay ATTENTION MUNDY!

(rubs head)

Glad I could help!

[Phil Sherry]

Originally posted by Simon Mundy:
(smack!) Pay ATTENTION MUNDY!

(rubs head)

Glad I could help!

i'm writing this day on iCal