Vertical alignment does not seem to work

Question

I am animating an image enclosing in a div, which moves from a <li> to some other div. The destination div contains a span having content.

What I need that, when image div appends to destination div, the all content (span text and appended img div) should be vertically centered.

var des = $(".destnation").position();   
 var el = $(".toMove");   
 el.css("position", "absolute");   
 el.animate({ top: des.top+"px" ,left :des.left+"px"}, 2000, undefined, function () {  
 el.remove().appendTo(".destnation").css("position", "static");   
 });

.destination {
   height: 4.9em;
   width: 100%;
   overflow: hidden;
   text-align: left;
   vertical-align: middle;
}

.destination span {
   color: #3366CC;
   font: 1.50em georgia, garamond, serif;
   margin-top: 0.625em;
   margin-bottom: 0.625em;
   display: block;
}

I have mutiple divs in that div... and I need them vertically... `display: table-cell` make it in a single row... that I dont want — RAJ, Jul 17 '12 at 12:10
then you can't use vertical-align. The other possibility is computing the middle on your own. (div_height - image_height)/2 — Sven Bieder, Jul 17 '12 at 12:18
use still can use table-cell and also apply `clear: both` to your divs — haynar, Jul 17 '12 at 12:35
@RAJ Possible duplicate : http://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div — AdityaSaxena, Jul 17 '12 at 12:50
Aditya you should put that in an answer so RAJ can accept it. The bottom line is the vertical-align property does nothing when set on a block level element. — ryanulit, Jul 17 '12 at 13:34

score 0 · Accepted Answer · answered Jul 17 '12 at 14:13

0

HTML scales for width rather than height.

When you use vertical-align within Tables it works as you would expect. <td style="vertical-align:middle">

It will not always work correctly within regular classes.

answered Jul 17 '12 at 14:13

Eric Whitehead

120
5

Vertical alignment does not seem to work

1 Answers1