Vertical-align:middle not working

HTML & CSS
1

I’ve always had difficulty w/this in CSS… however: according to this
CSS vertical-align property

vertical-align:middle should work…

I have:

<div class="item"><span>merchant's name</span></div>

.item has a specific height (38px) and span inside it should vertical-align middle; but it’s not working and this is problematic for me b/c some items are one line, others are longer names and fall into two lines… they all have to vertical-align:middle, like valign=“middle” in table td’s (can’t use display:table-cell b/c this doesn’t work in IE, correct?) man, what a pain…

thank you…

PS: just tried display:table-cell, it’s not working… (thought I’d try, see if it works in IE8 at least…)

.merchants_list div.item {display:table-cell; width:225px; height:38px; }
.merchants_list div.item span {valign:middle; vertical-align:middle; /* both of these not working…*/ }

(why can’t you wrap code in code tags when editing posts??? most editing features available when you’re composing orig posts are not available when you edit a post – why is this???)

thank you…

2

Try this:


.merchants_list div.item {
  display:table;
  width:225px;
  height:38px;
}
.merchants_list div.item span {
  display:table-cell;
  vertical-align:middle;
}

Vertical alignment is not something CSS does well. :confused:

3

In stead of :

.merchants_list div.item {display:table-cell; width:225px; height:38px; }
.merchants_list div.item span {valign:middle; vertical-align:middle; /* both of these not working..*/ }

use this:

.merchants_list div.item {display:table-cell; width:225px; height:38px;vertical-align:middle; }

You no longer need the SPAN. Also, here is no such property as valign in CSS.

This, however , doesn’t play nice with older IE because… well, it’s IE. :wink:

But actually, you missed the concept of how the VA property works ( outside a table context). To VA elements within a block context, you need to have those elements be “inline” ( or inline-block) the elements, those elements are then aligned to EACH OTHER, not to the parent container.


 div.item { width:225px;  background:pink;  height:138px;}
 div.item:after { content:""; display:inline-block; height:inherit;vertical-align:middle; }
 div.item span { display:inline-block }

the two draw backs to the above are that it doesn’t work in IE<8 right off the bat(there are easy ways to simulate “:after” in IE tho) and that it requires the parent to have explicit height of some form or another.

(why can’t you wrap code in code tags when editing posts??? most editing features available when you’re composing orig posts are not available when you edit a post – why is this???)

You need to click on the “Go Advanced” button, that will let you edit your post in the full TinyMCE type editor again.

Hope I was able to help