Centering dynamic div without using width

Question

My question is simple, how can I center these two elements using the css "button" class dynamically? -> http://jsfiddle.net/MyVN4/ (I don't want to specify the width of the elements)

.button {
   background-color: black;
   border-radius: 10px;
   color: white;
   display: inline-block;
   padding: 10px;
 }

I've been looking other similar questions but none of the solutions work for this problem.

Thanks in advance for your help!

score 4 · Answer 1 · edited Jan 27 '14 at 22:04

4

put text-align: center; on its parent (whatever its parent will be).

edited Jan 27 '14 at 22:04

Blazemonger

90,923
26
142
180

answered Jan 27 '14 at 22:04

Esser

540
1
4
16

@Blazemonger Thanks for the edit. I haven't noticed this was a grammar site too. :) – Esser Jan 27 '14 at 22:11
Thanks! Makes more sense using its parent for this!! – DreaMTT Jan 27 '14 at 22:38

score 3 · Accepted Answer · edited May 23 '17 at 12:28

3

Given that they are inline elements, just set text-align:center on a parent element, in this case, the body element:

UPDATED EXAMPLE HERE

#parent_element {
    text-align:center;
}

You usually only have to set a width on the element when it is a block level element and will be unaffected by text-align:center, (it would need margin:0 auto). Using text-align:center is probably the best method for centering, even if you have to change the display of an element to inline-block. Just be aware of the fact that inline elements respect whitespace in the markup.

edited May 23 '17 at 12:28

Community

1
1

answered Jan 27 '14 at 21:59

Josh Crozier

233,099
56
391
304

Centering the entire `body` element is probably undesirable. – Blazemonger Jan 27 '14 at 22:04
@Blazemonger This isn't centering the entire body element. The `body` element is `block` level, therefore this property will have no effect on it, especially since it has a width of `100%`. – Josh Crozier Jan 27 '14 at 22:04
Obviously I meant the entire *contents* of the `body` element. – Blazemonger Jan 27 '14 at 22:05

Centering dynamic div without using width

2 Answers2