RSS

Float div on center of page

09 Jun

By: corelangs.com

Div on center of screen

In CSS, float-based layouts are not much flexible, however, a float is somewhat more difficult to center.

Is there any way to center floating elements?

Floated div centered

This is an age old question. You can float left or right, but there’s no way to float center in CSS layout.

Positioning DIV element at center of screen

Centre Div in Middle of Screen

You can solve it in a simple way.

margin: 0 auto;

The above code states that the TOP margin and Bottom margin are set to 0 and LEFT margin and Right margin set to auto (automatic). Here the automatic left and right margins push the element into the center of its container.

How to display div in center of screen

mergin : 0 auto

From the above picture you can understand how it display at the center of the screen.

margin: 0 auto;

is equal to

margin 0 auto 0 auto;

or you can write like the following:

margin-top:0; margin-right:auto; margin-bottom:0; margin-left:auto;

The following source code shows how to center Div in the middle of browser.

<!DOCTYPE html> <html > <head> <style type=”text/css”> .centerDiv { width: 60%; height:200px; margin: 0 auto; background-color:#FFA500 ; } </style> </head> <body> <div class=”centerDiv”> </div> </body> </html>

Two column layout Div at the center of the screen

Center Floated Divs in a Container

Center a Floating div

Source Code

<!DOCTYPE html> <html > <head> <style type=”text/css”> .centerDiv { width: 60%; height:200px; margin: 0 auto; background-color:#FFA500 ; } .div1 { width: 50%; height:200px; background-color:#A52A2A ; float:left; } .div2 { width: 50%; height:200px; background-color:#FFA500 ; float:left; } </style> </head> <body> <div class=”centerDiv”> <div class=”div1″> </div> <div class=”div2″> </div> </div> </body> </html>

Position Div Exactly at the center of the screen

Center div on page vertically , Center div on page horizontally

Exactly center means, position Div horizondaly and virtically at the center of the screen.

div vertcally center horizondally center

Source Code

<!DOCTYPE html> <html > <head> <style type=”text/css”> .exactCenter { width:200px; height:200px; position: fixed; background-color: #00FF00; top: 50%; left: 50%; margin-top: -100px; margin-left: -100px; } </style> </head> <body> <div class=”exactCenter”> </div> </body> </html>

Horizontal Divs at the center of the browser

Show div on center of screen

center floating div elements

Source Code

<!DOCTYPE html> <html > <head> <style type=”text/css”> .div1 { width: 50%; height:70px; background-color:#A52A2A ; margin: 0 auto; } .div2 { width: 50%; height:70px; background-color:#FFA500 ; margin: 0 auto; } .div3 { width: 50%; height:70px; background-color:#008000 ; margin: 0 auto; } </style> </head> <body> <div class=”div1″> </div> <div class=”div2″> </div> <div class=”div3″> </div> </body> </html>

Three column layout Div at the center of the screen

Place div on center of screen

Center Floated DIVS In Container

Source Code

<!DOCTYPE html> <html > <head> <style type=”text/css”> .centerDiv { width: 60%; height:200px; margin: 0 auto; background-color:#FFA500 ; } .div1 { width: 33%; height:200px; background-color:#A52A2A ; float:left; } .div2 { width: 34%; height:200px; background-color:#FFA500 ; float:left; } .div2 { width: 33%; height:200px; background-color:#008000 ; float:left; } </style> </head> <body> <div class=”centerDiv”> <div class=”div1″> </div> <div class=”div2″> </div> <div class=”div3″> </div> </div> </body> </html>

Copy from: http://www.corelangs.com/css/box/center-div.html

Advertisements
 
Leave a comment

Posted by on June 9, 2014 in CS Style

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: