CODEWITHSUNDEEP
htmlcss
DolDurma
DolDurma

Reputation: 17380

div center alignment using CSS

What is the easiest way to align a div to center widthout using position. i have 3 div and i want to set center of page with using CSS 

<!doctype html>
<html lang="en">
    <head>
        <title></title>
    </head>
    <style>
        #content {
            width: 200px;
            height: 200px;
            margin:0 auto;
            border: 1px solid #000;
            float:right;
        }
    </style>
    <body>
        <div id="content">
            content 1
        </div>
        <div id="content">
            content 2
        </div>
        <div id="content">
            content 3
        </div>
    </body>
</html>

Upvotes: 0

Views: 618

Answers (8)

Suraj Rawat
Suraj Rawat

Reputation: 3763

Here is the css with few line of code

.container{width:100%;}
.container div{border:1px solid red;margin:0 auto;width:200px;}

Upvotes: 1

Dropout
Dropout

Reputation: 13876

You can use the margin: 0 auto; on the element which has to be placed in the center. However in order to do this the element must have some sort of a wrapper(not "body") to be able to use the auto setting.

<html>
    <head>
    </head>
    <body>
        <div id="page_wrapper">
            <div id="div_1" class="centered_div">foo</div>
            <div id="div_2" class="centered_div">foo</div>
            <div id="div_3" class="centered_div">foo</div>
        </div>
    </body>
</html>

CSS:

#page_wrapper{
    width:100%;
}

.centered_div{
    margin: 0 auto;
}

This centers all elements which have the class centered_div to the middle of their parent.

Other option is to used fixed canter position. For example if you're creating a popup notification message, this might be a way to go.

.notification_window{
    position: fixed;
    width: 100px;
    height: 100px;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

But if it's just a regular page element like a div with some content use the first example.

If you need any further explanations please comment.

Upvotes: 0

nkmol
nkmol

Reputation: 8091

You want to modify your code as less as possible?

Then you might want to delete your floating:

#content {
    width: 200px;
    height: 200px;
    margin:0 auto;
    border: 1px solid #000;
    /*float:right;*/
}

Because you are using a margin to center the element, a float is not neccesary. A float will only put the element out of the flow(so basically the <body> doesn't see these elements as his content, which results that the elements cannot center them selves from their parent. There is no parent of the same flow!)

jsFiddle

It is also a good call to not use the same IDs. IDs should always be unique
However same IDs are supported by CSS, but it is a good practice to use unique IDs from now on.

Upvotes: 0

codingrose
codingrose

Reputation: 15709

You are using same ids multiple time. ids must be unique.

Use class instead.

Wrap all content divs in an element:

HTML:

<div class="container">
    <div class="content">content 1</div>
    <div class="content">content 2</div>
    <div class="content">content 3</div>
</div>

CSS:

.container {
    width:606px; /* (200*3) = 600 + (6px for borders) */
    margin:0 auto;
}
.content {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    float:left;
}

DEMO here.

Upvotes: 1

Nikhil Kudtarkar
Nikhil Kudtarkar

Reputation: 169

First of all, don't use ID like class, you can repeat ID so many times but it's a bad practice.

And I'm not sure if I understood it right, but remove float:right from your css which will get your div's one below another. You can see output fiddle

Upvotes: 1

Sowmya
Sowmya

Reputation: 26989

Wrap divs with a parent div and add margin:0 auto

.wrapper{
  width:200px;
  margin:0 auto;
  border:solid 2px red
}
.content{
  background:grey;
}

DEMO

Upvotes: 0

ieatbytes
ieatbytes

Reputation: 516

first of all you are using "id" selector for 3 elements/containers which is wrong. replace the style with below snippet

 <style>
    #content {
        width: 200px;
        height: 200px;
        margin:0 auto;
        border: 1px solid #000;

    }
</style>

i just have removed the floating (which forcing your containers to be on right)

Upvotes: 0

veelen
veelen

Reputation: 1924

Give it a width and do margin: 0 auto;

Ow, and use an unique id.

Upvotes: 0

Related Questions