WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > Div Positioning

Reply
  Thread Tools Display Modes
Old 3rd March 12, 11:59 AM   #1
sasogeek
WLC Member
 
Join Date: Mar 2012
Posts: 3
Default Div Positioning

I've made an html div but I want a class that can place the div in the middle of the page. what css property and value do I need to use?
sasogeek is offline   Reply With Quote
Old 3rd March 12, 12:05 PM   #2
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,194
Default Re: Div Positioning

Vertically, Horizontally or both?
chrishirst is offline   Reply With Quote
Old 3rd March 12, 12:29 PM   #3
sasogeek
WLC Member
 
Join Date: Mar 2012
Posts: 3
Default Re: Div Positioning

Quote:
Originally Posted by chrishirst View Post
Vertically, Horizontally or both?
I was asking of a horizontal placement but I'd be glad if you'd show me how to do that of a vertical placement too thanks
sasogeek is offline   Reply With Quote
Old 3rd March 12, 12:51 PM   #4
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,194
Default Re: Div Positioning

For a horizontally centred element it is fairly simple, give a block element a set width, along with left and right margins of "auto" and top and bottom margins of a set value to suit your layout.

Code:
.Hcentre {
     width:80%;
     margin: 0 auto;
}
Vertical centre is a little more involved, and there are several ways of acheiving it.

But a pure CSS method is to apply display: table-cell; and vertical-align: middle; to the parent element.

http://www.modtalk.co.uk/_site/code/...ay-table-cell/
chrishirst is offline   Reply With Quote
Old 3rd March 12, 12:56 PM   #5
sasogeek
WLC Member
 
Join Date: Mar 2012
Posts: 3
Default Re: Div Positioning

Thank you
sasogeek is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

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

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 01:01 PM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.