File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
The moose likes HTML, CSS and JavaScript and the fly likes Vertical alignment issues :  vertical-align:middle does not work Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Vertical alignment issues :  vertical-align:middle does not work" Watch "Vertical alignment issues :  vertical-align:middle does not work" New topic
Author

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

salvin francis
Ranch Hand

Joined: Jan 12, 2009
Posts: 928

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 ??



My Website: [Salvin.in] Cool your mind:[Salvin.in/painting] My Sally:[Salvin.in/sally]
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
If you are using a table for layout you can save yourself trouble by using valign on the table cell.

Eric
salvin francis
Ranch Hand

Joined: Jan 12, 2009
Posts: 928

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
Ranch Hand

Joined: Jan 12, 2009
Posts: 928

a slightly better, crossbrowser solution:



But the Big word problem still exists here

Please help me guys .....
salvin francis
Ranch Hand

Joined: Jan 12, 2009
Posts: 928

for those who are too busy to run the code:



salvin francis
Ranch Hand

Joined: Jan 12, 2009
Posts: 928

Here is another solution, works gracefully in IE,

Fails in Firefox and chrome (no comments )




Andy Crane
Greenhorn

Joined: Dec 30, 2008
Posts: 17
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.



- andy c
"Pseudo code first. If you can pseudo code accurately, when you start writing code, you're just applying syntax to the pseudo code. It separates the two most complicated pieces of programming into manageable bites. You create your app's workflow without worrying about syntax. Then you code without worrying about your app's workflow."
salvin francis
Ranch Hand

Joined: Jan 12, 2009
Posts: 928

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.
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: Vertical alignment issues : vertical-align:middle does not work