Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations sizbut on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Vertically centre text in heading 1

Status
Not open for further replies.
JamesLean

JamesLean

Programmer
Dec 13, 2002
3,059
GB
Is there any easy way to center the text vertically in a fixed-height H1 heading, such as:

Code: 
<style type="text/css">
h1 {
	margin: 0;
	padding: 0;
	height: 120px;
	background: #CCC;
	text-align: right;
}
</style>

...

<h1>Header</h1>

I would like the text to be centered vertically on the right-hand side. I have tried nesting a span inside the H1 and using:

Code: 
h1 span {
	vertical-align: middle;
}

...

<h1><span>Header</span></h1>

but it didn't have any effect.

--James
 
Sort by date Sort by votes
Don't worry about a div - use line-height:

Code: 
<html>
<head>
	<style type="text/css">
		h1 {
			line-height: 100px;
			background-color: green;
		}
	</style>
</head>

<body>
	<h1>A title</h1>
</body>
</html>

Hope this helps,
Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

 
Upvote 0 Downvote
I have a similar requirement, but if my heading (h1) is long enough, I end up with two lines (of line-height: 70px) and a total height of 140px. :(

What I'd like to do is:
Priority 1: Create an H1 which is centered against a background image (on the right of 70x70 pixels).
Priority 2: Create an H1 which is centered against a hyperlinked image displayed on the right.

It must be able to accommodate up to two lines of text - but be wrapped so that the line-height is kept at a minimum.

This is my code so far:
PRIORITY 1:
Code: 
<style type="text/css">
h1 {
	background-image: url('image.gif');
	background-repeat: no-repeat;
	background-position: center right;
	line-height: 50px;
}
</style>
...
<h1>Title Goes Here</h1>
PRIORITY 2:
Code: 
<style type="text/css">
div.container {
	border: 1px solid #ff0000;
}
h1 {
	display: inline;
	margin-right: 70px;
}
.item {
	width: 100%;
	margin-right: -70px;
	vertical-align: middle;
}
.image {
	vertical-align: middle;
}
</style>
...
<div class="container">
	<span class="item"><h1>Title Goes Here</h1></span>
	<span class="image"><a href="/"><img src="image.gif" height="70" width="70" border="0"></a></span>
</div>

Pete.

Freelance IBM LWWCM (Aptrix) Specialist & Web Developer
e: pete.raleigh(at)lclimited.co.uk
w: w:
 
Upvote 0 Downvote
Hi Pete,

To achieve the second goal in Firefox, this code works a treat for me:

Code: 
<style type="text/css">
	div.container {
		position: relative;
		border: 1px solid #FF0000;
	}
	.item {
		position: relative;
		z-index: 1;
	}
	.image {
		position: absolute;
		top: 50%;
		right: 0px;
		margin-top: -35px;
		z-index: 0;
</style>

...

<div class="container">
	<span class="item"><h1 class="method2">Title Goes Here</h1></span>
	<span class="image"><a href="/"><img src="image.gif" height="70" width="70" border="0"></a></span>
</div>

Basically, it positions the top of the image halfway down the container, and then moves it up by half its height (to centre it vertically).

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Wartook.......Would this work?

h1 {
width: 70px;
height: 70px;
background-image: url('image.gif');
background-repeat: no-repeat;
text-align:center;
line-height: 64px;
margin: 0;
padding: 0;
}

or this?

h1 {
width: 70px;
height: 70px;
background-image: url('image.gif');
background-repeat: no-repeat;
background-position: center right;
line-height: 64px;
margin: 0;
padding: 0;
}




For every problem, there's a solution and every solution brings it's own set of problems.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
810
spamjim
spamjim
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis
PeDa
  • Locked
  • Question
Media query: display = none/inline/block 1
Replies
1
Views
771
PeDa
PeDa
waubain
  • Locked
  • Question
Prevent user from getting a 404 error if click on a hover text displaying a hidden image. 1
Replies
5
Views
244
jjgupta915
jjgupta915

Part and Inventory Search

Sponsor

Back
Top