Align contents of a div in the center

Question

I have a div with width:100%; since I want to fill out the parent container.
I also want to have the contents of the div in its center. I can not find a horizontal-align:center attribute for the divs. How can I configure the div so that its contents are in the center?
I.e if the div is this big:

------------------------------------------------------------------------------------------------------------  
                    Enclosing tags here  
                    in the center  
------------------------------------------------------------------------------------------------------------

possible duplicate of [Align contents inside a div](http://stackoverflow.com/questions/684634/align-contents-inside-a-div) — Michael Schmidt, Nov 11 '13 at 09:44
@dTDesign:The answer linked does not work for me. It works if I do: `width:100px;margin:auto` but not if I do `width:100px;margin:auto` — Jim, Nov 11 '13 at 09:50
then the best would be to create a jsFiddle so we can help you better. — Michael Schmidt, Nov 11 '13 at 10:02

score 2 · Answer 1 · edited Nov 11 '13 at 10:03

2

try this:

div {
    margin:0 auto;
}

edited Nov 11 '13 at 10:03

George Brighton

5,131
9
27
36

answered Nov 11 '13 at 09:44

Dr Robotnik

352
1
4
14

Sridhar R · Answer 2 · 2013-11-11T09:55:26.753

1

Try this for fixed width

div.class_name {
width: XXpx;
margin: 0 auto;
text-align: center;
}

Dynamic Height

<div class="container">
 <div class="inside">some content</div>
</div>


.container
{
 text-align: center;
}
.inside
{
 display:inline-block;
}

In HTML

<div style="text-align: center;"> </div>

That all you need for the CSS.

edited Nov 11 '13 at 09:55

answered Nov 11 '13 at 09:50

Sridhar R

20,190
6
38
35

I want to make sure that I fill out the parent container.Turns out I can not use `width:100%` – Jim Nov 11 '13 at 09:51

score 0 · Answer 3 · answered Nov 11 '13 at 09:43

0

Read about margin: auto trick: http://bluerobot.com/web/css/center1.html

answered Nov 11 '13 at 09:43

1

With `width:100%` and `margin:auto` it does not work – Jim Nov 11 '13 at 09:45

score 0 · Answer 4 · answered Nov 11 '13 at 09:44

0

You could try setting:

margin: auto

I'm not sure if it helps in this case.

answered Nov 11 '13 at 09:44

El Mac

3,256
7
38
58

score 0 · Answer 5 · answered Nov 11 '13 at 09:45

0

div.class {
margin:0 auto;
width: 800px /*as desired*/ ;
}

answered Nov 11 '13 at 09:45

Richa

4,240
5
33
50

score 0 · Answer 6 · answered Nov 11 '13 at 09:47

0

You must assign width to div that you will want locate to center then right and left margin should get 0 value

{
 width: 100px;
 margin : 0 auto;
}

answered Nov 11 '13 at 09:47

Hamid Bahmanabady

665
1
8
20

score 0 · Answer 7 · answered Nov 11 '13 at 09:50

0

This might be what you looking for: padding:0 20%; using a % helps auto adjust the padding depending on how wide the parent div is. You can change 20% to your preferred number.

.div {
width:100%;
padding: 0 20%;
}

answered Nov 11 '13 at 09:50

Simo Mafuxwana

3,702
6
41
59

score 0 · Answer 8 · answered Nov 11 '13 at 09:51

0

You should try text-align:center; to make content of div in center.

answered Nov 11 '13 at 09:51

Lusy

1
1

Align contents of a div in the center

8 Answers8