Win a copy of Design for the Mind this week in the Design forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Vertical alignment issues : vertical-align:middle does not work

 
salvin francis
Bartender
Posts: 1268
10
Eclipse IDE Google Web Toolkit Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi,
I have a requirement to vertically align content in middle using CSS
this data consists of an image and a span tag in a cell containing pre

This is wht i have attempted:




Output :

In IE 7 : Stupid browser does not honor Padding @ rhs or even overall 1 px padding !! the pre tag is not center aligned vertically
In FF 3 : Well at least it shows padding, But Hey Still no center Aligned !!
In Chrome 2.0 : Well, seems center aligned to me
In Safari : Well, seems center aligned to me


why is IE and FF ignoring the vertical-align:middle ? i have given it to PRE, Img, Span, Where else shall i give it ??


 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
If you are using a table for layout you can save yourself trouble by using valign on the table cell.

Eric
 
salvin francis
Bartender
Posts: 1268
10
Eclipse IDE Google Web Toolkit Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
valign does not work,

btw i was able to center align stuff by changing the display, but it fails for big words



As shown above, the approach 2 wraps the text to the next line with large content. I dont know why this happens (overflow:hidden should have worked),

My Aim is:
1. Create an image + text with minimal use of tags (prefably pre instead of div) inside a cell,
2. Ensure that both image and text are aligned vertically in center.
3. if text exceeds the width of a cell, it should be hidden (ellipsis in IE), not wrapped or placed in next line.


I also attempted to use margin-top:auto; and margin-bottom:auto
but it didnt work, Please help.

The Problem is that this is one row of a Hug Huge Code of table shown to a user, i know that including a nested table can solve both issues
but, This would terribly slow down the page (there are many many such rows)
 
salvin francis
Bartender
Posts: 1268
10
Eclipse IDE Google Web Toolkit Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
a slightly better, crossbrowser solution:



But the Big word problem still exists here

Please help me guys .....
 
salvin francis
Bartender
Posts: 1268
10
Eclipse IDE Google Web Toolkit Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
for those who are too busy to run the code:



 
salvin francis
Bartender
Posts: 1268
10
Eclipse IDE Google Web Toolkit Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Here is another solution, works gracefully in IE,

Fails in Firefox and chrome (no comments )




 
Andy Crane
Greenhorn
Posts: 17
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
yer not supposed to center a pre tag.

It's meant to just display EXACTLY what it contains, including spaces, etc.

Center the element that contains the pre tag.

 
salvin francis
Bartender
Posts: 1268
10
Eclipse IDE Google Web Toolkit Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hmm,
Andy
I feel you have misunderstood me,

I need a pre because : I need to display EXACTLY what it contains, including spaces, etc (so if there is no BR it should not wrap)
Next, the alignment is not center as specified by your solution, its Middle, i need it to be vertically in middle


Note that if the above image does not appear, copy its url and paste it in a new browser window to view it.
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic