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
576 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

.

383 posts
  • Won a Most Wanted contest
  • Sells items exclusively on Envato Market
  • Has sold $2M+ on Envato Market
  • Power Elite Author: Sold more than $1M on Envato Market
+7 more
GoodLayers says

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

429 posts
  • Has sold $250,000+ on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
  • Had an item featured on Envato Market
  • Made it to the Authors' Hall of Fame
+8 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
226 posts
  • Won a Most Wanted contest
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $750,000+ on Envato Market
  • Had an item featured on Envato Market
+10 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.

1702 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
+8 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
226 posts
  • Won a Most Wanted contest
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $750,000+ on Envato Market
  • Had an item featured on Envato Market
+10 more
ProgressionStudios says

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

409 posts
  • Has been part of the Envato Community for over 4 years
  • Sells items exclusively on Envato Market
  • Located in 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 ;)

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by