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:
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 ??
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)
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."
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.
subject: Vertical alignment issues : vertical-align:middle does not work