H1 line-height issues

HTML & CSS
1

Having a bit of an issue with the line-height of a styled h1 heading. I would like it to be inside a banner, but it sits on the bottom of the container, instead of in the middle as I’d like.

If anyone could help I’d be really grateful.

The URL is:

Title

The HTML is:


<div id="canvasouter">
	<div id="canvas">
		<h1 id="aqua"><span></span>Why doesn't the line-height work :(</h1>
	</div><!--canvas-->
</div><!--canvas-->

The CSS is:


#canvasouter { background:#eeeeee; margin:0 auto; padding:10px; width:977px; }
#canvas { background:#fff; border:1px solid #dcdcdc; padding:1px; }

h1#aqua { display:inline-block; }

h1#aqua { background:url(aquamarine-right.png) no-repeat right center; /*color:#fff;*/ font-weight:normal; font-size:28px; font-family:Georgia,times,serif; line-height:20px; letter-spacing:-2px; height:73px; margin:15px 0; padding:0 60px 0 10px; }
h1#aqua span { display:inline-block; background:url(aquamarine-left.png) no-repeat right center; height:73px; left:-23px; position:relative; width:14px; }

Many thanks for any help in advance :slight_smile:

2

Try this and see if it works for you :slight_smile:


		/*Canvas*/
		#canvasouter { background:#eeeeee; margin:0 auto; padding:10px; width:977px; }
		#canvas { background:#fff; border:1px solid #dcdcdc; padding:1px; }

		/*Banner Headers*/
		h1#aqua { display:inline-block; }

		h1#aqua { background:url(aquamarine-right.png) no-repeat right center; /*color:#fff;*/ font-weight:normal; font-size:28px; font-family:Georgia,times,serif; line-height:60px; letter-spacing:-2px; height:73px; margin:15px 0; padding:0 60px 0 10px; }
		h1#aqua span { display:inline-block; background:url(aquamarine-left.png) no-repeat right center; left:-23px; position:relative; width:14px; }
3

Thanks purves but that doesn’t work, it collapses the span which is needed for the left side of the banner :frowning:

4

Hi,

The span which you have set to display:inline-block moves the baseline down to the bottom and the subsequent text sits on the baseline because that is the default.

Try this.


h1#aqua span {
  background: url("aquamarine-left.png") no-repeat scroll right center transparent;
  display: inline-block;
  height: 73px;
  left: -23px;
  position: relative;
  [B]vertical-align: middle;
[/B]  width: 14px;
}
5

Thanks Paul, that’s great, however, it makes the content sit in the middle of the banner, but slightly off center vertically, and now adjusting the line-height of the h1, even to the extremes doesn’t seem to budge the text :S

6

Hi,

It is vertically centered but the height is the height of the wraparound so its slightly offset.

What you should do is remove the element from the flow so it doesn;t impact on your text.

e.g.


<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<title>Title</title>
<meta name="description" content="Content here" />
<meta name="keywords" content="Content here" />
<style type="text/css">
/*Canvas*/
        #canvasouter {
    background:#eeeeee;
    margin:0 auto;
    padding:10px;
    width:977px;
}
#canvas {
    background:#fff;
    border:1px solid #dcdcdc;
    padding:1px;
}
/*Banner Headers*/
        h1#aqua {
    display:inline-block;
}
h1#aqua {
    background:url(http://dev.pelli.co.uk/h1s/aquamarine-right.png) no-repeat right center; /*color:#fff;*/
    font-weight:normal;
    font-size:28px;
    font-family:Georgia, times, serif;
 [B]   line-height:60px;[/B]/* tweak here*/
    letter-spacing:-2px;
    height:73px;
    margin:15px 0;
    padding:0 60px 0 10px;
   [B] position:relative;/* stacking context */[/B]
}
h1#aqua span {
    background:url(http://dev.pelli.co.uk/h1s/aquamarine-left.png) no-repeat right center;
    display:inline-block;
    height:73px;
[B]    left:-14px; [/B]/* move into position*/
   [B] top:0;
    position:absolute;[/B]/* out of flow*/
    width:14px;
}
</style>
</head>
<body>
<div id="canvasouter">
    <div id="canvas">
        <h1 id="aqua"><span></span>Why doesn't the line-height work :(</h1>
    </div>
</div>
</body>
</html>

The element is placed absolutely then you can set the line height to the height of that blue strip and it will be vertically centred. Just increase the line height up or down a pixel to move it as required.

7

You also need this to follow the original rule if you want to support ie6 and 7.


* html h1#aqua{display:inline}
*+html h1#aqua{display:inline}
8

Wow, that’s really complex!

Thanks a lot Paul, you are a star :slight_smile: