Forum:

HTML Pages with CSS and JavaScript

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

salvin francis

Bartender

Posts: 2911

150

I like...

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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

http://www.salvin.in

Eric Pascarello

author

Posts: 15385

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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: 2911

150

I like...

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

valign does not work,

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>My scratch pad</title> 
<style type="text/css">

.myTable
{
	table-layout:fixed;
}
.pic{
	display:block;
	float:left;
}
.text{
	display:block;
	float:left;
}

td{
	overflow:hidden;
	text-overflow:ellipsis;
}
</style> 
</head> 
<body>

<table class="myTable" border="1"> 
	<tr> 
		<td width="330">
			Attempt 1 not working:
		</td> 
		<td width="130">
			<img src="http://www.outokumpu.solidcomponents.com/shared/img/16x16-Icon-HaveCAD-H3D2D.gif"/>
			<pre>Biggggggggggggggggggggg Worddddddddddddddddddddd</pre>
		</td> 
	</tr> 
	<tr> 
		<td>
			Attempt 2 works for small words:
		</td> 
		<td>
			<img src="http://www.outokumpu.solidcomponents.com/shared/img/16x16-Icon-HaveCAD-H3D2D.gif" class="pic"/>
			<pre class="text">small word</pre>			
		</td> 
	</tr> 
	<tr> 
		<td>
			Attempt 2 does not work here:
		</td> 
		<td>
			<img src="http://www.outokumpu.solidcomponents.com/shared/img/16x16-Icon-HaveCAD-H3D2D.gif" class="pic"/>
			<pre class="text">Biggggggggggggggggggggg Worddddddddddddddddddddd</pre>
		</td> 
	</tr> 
</table> 
</body> 
</html>

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)

http://www.salvin.in

salvin francis

Bartender

Posts: 2911

150

I like...

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

a slightly better, crossbrowser solution:

.myTable
{
	table-layout:fixed;
}
.pic{
	display:block;
	float:left;
	vertical-align:middle;
}
.text{
	display:block;
	float:left;
	margin:0px; /*For Firefox*/
}

td{
	overflow:hidden;
	text-overflow:ellipsis;
}

</style> 
</head> 
<body>

But the Big word problem still exists here

Please help me guys .....

http://www.salvin.in

salvin francis

Bartender

Posts: 2911

150

I like...

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

for those who are too busy to run the code:

http://www.salvin.in

salvin francis

Bartender

Posts: 2911

150

I like...

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Here is another solution, works gracefully in IE,

Fails in Firefox and chrome (no comments

)

.myTable
{
	table-layout:fixed;
}
td{
	overflow:hidden;
	text-overflow:ellipsis;
}

.pic{
	display:block;
	float:left;
	vertical-align:middle;
}
.text{
	display:block;
	float:left;
	margin:0px; /*For Firefox*/
}

.picNew{
	display:block;
	float:left;
	vertical-align:middle;
}
.textNew{
	display:block;
	float:left;
	margin:0px; /*For Firefox*/
	text-overflow:ellipsis;
	overflow:hidden;
}

</style> 
</head> 
<body>

<table class="myTable" border="1"> 
	<tr> 
		<td width="330">
			Attempt 1:
		</td> 
		<td width="130">
			<img src="http://www.outokumpu.solidcomponents.com/shared/img/16x16-Icon-HaveCAD-H3D2D.gif"/>
			<pre>Biggggggggggggggggggggg Worddddddddddddddddddddd</pre>
		</td> 
	</tr> 
	<tr> 
		<td>
			Attempt 2 works for small words:
		</td> 
		<td>
			<img src="http://www.outokumpu.solidcomponents.com/shared/img/16x16-Icon-HaveCAD-H3D2D.gif" class="pic"/>
			<pre class="text">small word</pre>			
		</td> 
	</tr> 
	<tr> 
		<td>
			Attempt 2 does not work here:
		</td> 
		<td>
			<img src="http://www.outokumpu.solidcomponents.com/shared/img/16x16-Icon-HaveCAD-H3D2D.gif" class="pic"/>
			<pre class="text">Biggggggggggggggggggggg Worddddddddddddddddddddd</pre>
		</td> 
	</tr>
	<tr> 
		<td>
			Attempt 3:
		</td> 
		<td>
			<div class="picNew">
				<img src="http://www.outokumpu.solidcomponents.com/shared/img/16x16-Icon-HaveCAD-H3D2D.gif">
			</div>
			<pre class="textNew">Biggggggggggggggggggggg Worddddddddddddddddddddd</pre>
		</td> 
	</tr> 
	<tr> 
		<td>
			Attempt 3 new:
		</td> 
		<td>
			<div class="picNew">
				<img src="http://www.outokumpu.solidcomponents.com/shared/img/16x16-Icon-HaveCAD-H3D2D.gif">
			</div>
			<pre class="textNew">Small Word</pre>
		</td> 
	</tr> 
</table> 
</body> 
</html>

http://www.salvin.in

Andy Crane

Greenhorn

Posts: 17

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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

Bartender

Posts: 2911

150

I like...

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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.

http://www.salvin.in