CSS

 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me



Go Back   Tutorialized ForumsWeb Design & DevelopmentCSS

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Tutorialized Forums Sponsor:
  #1  
Old July 1st, 2013, 07:35 PM
cjackson111 cjackson111 is offline
Registered User
Tutorialized Newbie (0 - 499 posts)
 
Join Date: Dec 2012
Posts: 9 cjackson111 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 h 52 m 36 sec
Reputation Power: 0
Align Div vertically on page with CSS

Hello. I am sure this is an easy one for the fine folks here. I just can't figure it out. How can I center a div vertically on my page using css? I know how to do it in a table cell (valign="middle"), just not in css.

Also, as a secondary want, I have two images on the page, one above the other. I'd like these to be centered vertically but spread further apart from each other if the screen it is being viewed on is taller than normal and get closer together if the screen is smaller. Again, I can do this using table but need to use css.

I am developing this for Android.

Thanks!

Reply With Quote
  #2  
Old January 2nd, 2014, 01:03 AM
kevinkrieger kevinkrieger is offline
Registered User
Tutorialized Newbie (0 - 499 posts)
 
Join Date: Dec 2013
Posts: 4 kevinkrieger User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 h 52 m 13 sec
Reputation Power: 0
<body>
<div class="centered">
centered content
</div>
</body>
CSS

body {
margin: 0;
padding: 0;
text-align: center;
}

.centered {
margin: 0 auto;
text-align: left;
}

Reply With Quote
  #3  
Old March 13th, 2015, 02:16 AM
nct123 nct123 is offline
Registered User
Tutorialized Newbie (0 - 499 posts)
 
Join Date: Mar 2015
Posts: 1 nct123 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 12 m 47 sec
Reputation Power: 0
The best and most flexible way

HTML:

<div></div>

CSS:

div {
width: 100px;
height: 100px;
background-color: red;

position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;

margin: auto;
}

Reply With Quote
  #4  
Old December 28th, 2016, 03:18 AM
dishagandhi dishagandhi is offline
Registered User
Tutorialized Newbie (0 - 499 posts)
 
Join Date: Dec 2016
Location: Ahmedabad
Posts: 52 dishagandhi User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 17 h 40 m 42 sec
Reputation Power: 1
Below is the best all-around solution that you could build vertically & horizontally center a div with flexible height content box.

HTML:

Code:
<div class="outside">
  <div class="mid">
    <div class="inside">

      <h1>The Content</h1>

      <p>Once upon a midnight dreary...</p>

    </div>
  </div>
</div>

CSS:
 
 .outside {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

.mid {
    display: table-cell;
    vertical-align: middle;
}

.inside {
    margin-left: auto;
    margin-right: auto; 
    width: /*whatever width you want*/;
}

Reply With Quote
Reply

Viewing: Tutorialized ForumsWeb Design & DevelopmentCSS > Align Div vertically on page with CSS


Developer Shed Advertisers and Affiliates


Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 

Powered by: vBulletin Version 3.0.5
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.

© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap