409 posts
  • Has been part of the Envato Community for over 4 years
  • Sells items exclusively on Envato Market
  • Located in 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
561 posts
  • Located in Portugal
  • Contributed a blog post
  • Helped several times protecting Envato Market against copyright violations
  • Has sold $5,000+ on Envato Market
+4 more
DiogoRedinDevelopment says

.

380 posts
  • Sells items exclusively on Envato Market
  • Has sold $2M+ on Envato Market
  • Power Elite Author: Sold more than $1M on Envato Market
  • Made it to the Authors' Hall of Fame
+6 more
GoodLayers says

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

365 posts
  • Has referred 200+ members
  • Has sold $250,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 50+ items on Envato Market
+7 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
  • Sells items exclusively on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
  • Made it to the Authors' Hall of Fame
  • Located in Finland
+4 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
222 posts
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $750,000+ on Envato Market
  • Had an item featured on Envato Market
  • Made it to the Authors' Hall of Fame
+9 more
ProgressionStudios says
409 posts
  • Has been part of the Envato Community for over 4 years
  • Sells items exclusively on Envato Market
  • Located in 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.

1640 posts Building the Web.
  • Has been a beta tester for an Envato feature
  • Sells items exclusively on Envato Market
  • Has sold $250,000+ on Envato Market
  • Had an item featured on Envato Market
+7 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
222 posts
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $750,000+ on Envato Market
  • Had an item featured on Envato Market
  • Made it to the Authors' Hall of Fame
+9 more
ProgressionStudios says

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

4247 posts
  • Has been part of the Envato Community for over 6 years
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+5 more
Aw_Shucks says

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. :)

by
by
by
by
by
by