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 Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Vertical Align 1

Status
Not open for further replies.
Gazzieh

Gazzieh

IS-IT--Management
Dec 18, 2006
117
GB
Following previous advice and experimentation, I have two images and some text I wish to align. I wish to have the images, one on the left and one on the right and with the text centred between the two (which I have achieved).

However, the text is aligned to the baseline of the images and though I have defined the line-height and the vertical-align within the container div FOOTER, I cannot get the text to be vertically aligned. I have tried various combinations but to no avail.

Code: 
#footer
      {
      height: 32px;
      text-align: center;
      line-height: 32px;
      vertical-align: middle;
      }
		
.left {left: 0}
	
.right {right: 0}
The relevant HTML is...
Code: 
<div id="footer">
<img class="left" src="images/vhtml.png" alt="Valid HTML 4.01 Transitional">
<a href="[WEB_ADDRESS]">[TEXT HERE]</a> | Copyright &copy; 2008
<img class="right" src="images/vcss.gif" alt="Valid CSS!">
</div> <!-- End FOOTER div -->
Any help gratefully received!
 
Sort by date Sort by votes
How high are the images?

What DOCTYPE are you using?

What other styling is being applied to the images (because the two rules you have will do nothing by themselves, so presumably there has to be other CSS somewhere in play?).

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
The doctype is transitional HTML4 (as given by the code below:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]

No other formatting to the image, beyond that given above, is defined within the CSS and you already have the exact code relating to these images. The image sizes are 88x31 both.
 
Upvote 0 Downvote
Using just this CSS works fine:

Code: 
#footer {
	height: 32px;
	text-align: center;
	line-height: 32px;
}
#footer img {
	vertical-align: middle;
}

You don't need that left:0 and right:0 stuff as I've mentioned already - it has no effect so you may as well remove it and the redundant class names.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Yep, works fine. Thanks for that.

The left right classes were leftovers from the old divs and have now gone. Far neater.

Again, thanks! :eek:)
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

k4ghg
  • Locked
  • Question
Liquid vertical bar 1
Replies
2
Views
169
k4ghg
k4ghg
AzizKamal
  • Locked
  • Question
center-align menu item text 1
Replies
8
Views
342
vacunita
vacunita
PeDa
  • Locked
  • Question
css left and right align on one row
Replies
4
Views
123
vacunita
vacunita
PCHomepage
  • Locked
  • Question
Align Multiple Images Right
Replies
1
Views
108
PCHomepage
PCHomepage
rmcguire80
  • Locked
  • Question
align page up better?
Replies
2
Views
61
datamasher
datamasher

Part and Inventory Search

Sponsor

Back
Top