CODEWITHSUNDEEP
csshtmlalignment
Michael Samuel
Michael Samuel

Reputation: 3920

Center 2 divs horizontally without a wrapper

I want to simply center 2 divs horizontally regardless of the screen width and without using a wrapper. I have the following simple code:

#div1 {
     display: inline-block;
     width: 100px;
     border: 1px solid #000000;
}
#div2 {
     display: inline-block;
     width: 200px;
     border: 1px solid #000000;
}

I created the following fiddle for illustration: http://jsfiddle.net/axe89/

Upvotes: 0

Views: 372

Answers (4)

Suba S
Suba S

Reputation: 326

You can add 

text-align: center;

to the body tag or to whatever you are planning to wrap the divs with.

fiddle link

Upvotes: 0

SPEC
SPEC

Reputation: 75

Use css margin properties.

margin-left:40%

to the first div.

Upvotes: 0

unruthless
unruthless

Reputation: 517

@setek has the solution above, just wanted to add this quick rule of thumb:

To horizontally center display:inline and display:inline-block items, use text-align:center;.

To horizontally center display:block items, use margin: 0 auto;.

Upvotes: 1

lukeocom
lukeocom

Reputation: 3243

as alluded to by setek, you can define a container for your divs, with a width of 100% so that it scales with the screen/device width. Also set its text align to center to achieve your desired effect.

#container{text-align:center;width:100%;}

here is your updated fiddle

and for slightly modified markup and css - http://jsfiddle.net/axe89/5/

Upvotes: 0

Related Questions