Back to an old prob: vertical-align:middle

HTML & CSS
1

so what do you have to do to make vertical-align:middle work??

acc. to this page
http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

setting this property to “middle” should do just that: vertical-align an element to middle (i.e., equal amount of white space above and below element… for example a div with text inside another div… in my case content will be inserted dynamically and I don’t know how many lines of text it will be; it has to be middle-aligned vertically in all cases…)

display:table-cell does not work in all browsers, so that’s a non-starter…

I get so sick of this problem… why can’t vertical-align:middle ever work as it should? (like text-align:center; this always works… why doesn’t vertical-align:middle ever work???)

thank you…

2

What the page you linked to fails to mention is that the vertical-align property only works with inline elements and not block-level elements. A <div> is a block-level element, so vertical-align can’t ever work unless you modify its state, e.g. set its display to a non-block value.

@Paul_O_B; has some examples on how you can accomplish vertical centering/aligning. See here: http://pmob.co.uk/

This page has a few examples as well: http://blog.themeforest.net/tutorials/vertical-centering-with-css/

And a good explanation is offered by Chris Coyer here: http://css-tricks.com/what-is-vertical-align/

3

As Maleika said above vertical-align only applies to inline elements (and table-cells). It was never meant to vertically align block elements.

display:table-cell is the easiest solution and works in IE8+ and all other browsers that are in use. If you want IE7 support then you need to add a hack like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.outer {
	overflow: hidden;
	width: 134px;
	height: 149px;
	background:#ccc;
	float:left;
	margin: 10px;
	white-space:nowrap;
	display:table;
}
.outer ul {
	margin:0;
	padding:0;
	list-style:none;
	width:134px;
	display:table-cell;
	vertical-align:middle;
	position:relative;
}
.outer li{
	width:100%;	
	position:relative;
}
.outer li a{
	display:block;
	padding:0 10px;
	background:#666;
	zoom:1.0;
	position:relative
}
.outer li a:hover{background:red}
* html .outer ul {top:50%}/* ie6 hack*/
* html .outer li {top:-50%}/* ie6 hack*/
*+html .outer ul {top:50%}/* ie6 hack*/
*+html .outer li {top:-50%}/* ie6 hack*/
</style>
</head>
<body>
<div class="outer">
	<ul>
		<li><a href="#">Link 1</a></li>
		<li><a href="#">Link 2</a></li>
		<li><a href="#">Link 3</a></li>
	</ul>
</div>
<div class="outer">
	<ul>
		<li><a href="#">Link 3</a></li>
	</ul>
</div>
<div class="outer">
	<ul>
		<li><a href="#">Link 1</a></li>
		<li><a href="#">Link 2</a></li>
		<li><a href="#">Link 3</a></li>
		<li><a href="#">Link 3</a></li>
	</ul>
</div>
</body>
</html>
4

If you know the height of the element to be vertically aligned, you can do this:


<div class="parent">
     <div class="child">
          This is vertically aligned
     </div>
</div>

.parent {
     height: 500px;
     width: 500px;
     position: relative
}

.child {
     height: 200px;
     width: 200px;
     position: absolute;
     top: 50%;
     left: 50%;
     margin-top: -100px;
     margin-left: -100px
}

The top margin is minus half the child’s height, and the left margin is minus half its width.

Here is a slightly more robust example: http://jsfiddle.net/mfuxt/

5

I had some great help from Paul O B and Ron Pat on this forum with a vertical alignment problem.

Their finished output is here http://www.c5d.co.uk/descriptioned11891.php

If it is anything like what you want, I’ll be more than happy to provide you the HTML and CSS. It’s the least I can do after what they have done for me

Antony

6

thank you for your code, Spritanium, & Paul O’B… and to everyone else for their responses…

display:table-cell works pretty well, except if div is FLOATED!!! :slight_smile:

my div is floated, as it’s adjacent to another div… display table-cell only works if remove the float:left… oh brother… :frowning:

thank you…

7

Hi,

You’ll need to show us some code if you want more specific help.

You shouldn’t need to float the element if using display:table-cell properties because the cells will naturally be adjacent to each other. If using display:table structures you can use display:inline-table for tables aligned next to each other.

It all does depend on what you are doing though so we would need to see the code.:slight_smile:

8

Why w3schools.com still needs to get thrown into the trash

9

hmmm… ok, I see, Paul… I would have to change the layout of the entire thing (just two divs side-by-side, actually…:wink: from floated divs to display:table-cell… hmmm… we don’t officially support IE7 anymore, but ideally I’d still rather go with a solution that will work in IE7 also…

thank you…

10

interesting about display:table-cell: it doesn’t respect margins!! (of course, td’s don’t have margins…)

here are two examples: one with display:table-cell and one with floats…

table-cell you can do vertical-align:middle, but you can’t have a margin… (I suppose a solution can be found to fix the margin issue… :wink:

well, other possibility is to use JS to vertical-align the elements (again, I won’t know height of container of dynamic content…), which I actually did already, it works quite well (and the entire thing (my thingie with two divs) depends on JS to show up on the page anyway), but well, still trying to decide (advantage of JS option is it would work in IE7 too…)

11

Hi,

You can control the spacing between cells with border-spacing.


#outer{border-spacing:10px}

It’s not the same as margins but you can get pretty close to what you want. Sometimes it means making the outer stretch wider than you want so that the cells remain the size you wanted.

If you want older browser support then here a few old examples:

http://www.pmob.co.uk/temp/vertical-align5.htm
http://www.pmob.co.uk/temp/vert-align-textandimage3.htm
http://www.pmob.co.uk/temp/image-overflow3.htm

12

I think this about covers it… thank you everyone very much for your help…

(and thank you for the border-spacing tip, had forgotten about that one…)