409 posts
  • 5 Years of Membership
  • Exclusive Author
  • India
Dhruv
says

Hi Guys,

Do you have any tips on how to vertically align a div via CSS ?

DiogoRedinDevelopment
DiogoRedinDevelopment Recent Posts Threads Started
583 posts
  • Portugal
  • Wordsmith
  • Super Copyright Ninja
  • Author Level 4
+4 more
DiogoRedinDevelopment
says

.

392 posts
  • Most Wanted Winner
  • Author Level 13
  • Top Monthly Author
  • Trendsetter
+10 more
GoodLayers
says

Is that posible??
I think you need JQuery to do that thing or may be fixed position with “absolute”....

485 posts
  • Elite Author
  • Author Level 9
  • Weekly Top Seller
  • Top Monthly Author
+10 more
OrangeIdea
says
div#center {
 background:#CCC;
 width:300px;
 height:200px;
 position:absolute;
 top:50%;
 left:50%;
 margin-top:-100px;
 margin-left:-150px;
 }
 <body>
 <div id="┬╗center┬╗">some text</div>
 </body>

text in div
div {
height: 200px;
display: table-cell;
vertical-align: middle;
}

<div>
<p>text</p>
</div>
97 posts
  • Exclusive Author
  • Elite Author
  • Finland
  • 6 Years of Membership
+6 more
Smuliii
says

I used this piece of code in my latest theme:

div {
    bottom: 0;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
}

Demo: http://jsfiddle.net/B6DKY/

ProgressionStudios
ProgressionStudios Recent Posts Threads Started
228 posts
  • Power Elite Author
  • Top Monthly Author
  • Featured Author
  • Most Wanted Winner
+13 more
ProgressionStudios
says
409 posts
  • 5 Years of Membership
  • Exclusive Author
  • India
Dhruv
says

Thank you all for replying and helping me out.

@Smuliii method worked perfectly for me and @OrangeIdea method too, but with some glitches.

@ProgressionStudios The article is very interesting, I’m reading it right now..

@diogoredin I still don’t know what the . means

@saintdo certainly possible, try out these methods now if you want to.

1744 posts Building the Web.
  • Top Monthly Author
  • Trendsetter
  • Weekly Top Seller
  • Beta Tester
+10 more
ZoomIt
says
ProgressionStudios said
I used this article many times:
http://blog.themeforest.net/tutorials/vertical-centering-with-css/

Yes, but table render is hard on the browser.

Try to turn it off in your theme if you are using that, you should see a performance increase

ProgressionStudios
ProgressionStudios Recent Posts Threads Started
228 posts
  • Power Elite Author
  • Top Monthly Author
  • Featured Author
  • Most Wanted Winner
+13 more
ProgressionStudios
says

There are 5 different methods in the article. I don’t use the table-cell method.

409 posts
  • 5 Years of Membership
  • Exclusive Author
  • India
Dhruv
says
Aw_Shucks said
One way I know how to vertically align anything that has a horizontal orientation is to turn my head 90 degrees right or left. However, that doesn’t always solve the problem. Let me know if that helps. :)

Turns out, It works for me as well., But even i don’t think it will work for everybody and it will cause pain in the neck/head, so CSS solution(s) sounds best atm ;)

by
by
by
by
by
by