Advanced Search

Return to Snippet

Revision: 15546
at July 9, 2009 13:00 by webdevelopertut
Initial Code 
HTML:
<div class="contentdiv">
<p>It works! Vertically Center Align!</p>
</div>

CSS:
.contentdiv{ width: 135px; height: 84px; display: table; border:2px solid red;}
.contentdiv p{ display: table-cell; vertical-align: middle; text-align: center;}

Hack for ie:
.contentdiv p{*margin-top: expression(this.offsetHeight < this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight) / 2) + "px" : "0");}
Initial URL 
http://htmlcsstutorials.blogspot.com/2009/07/vertical-align-text-in-floating-div.html
Initial Description 

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
Vertical align text in floating div using css

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    
css, text

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
CSS