How to center a div with dynamic content

Question

<div>
  <button>First button</button>
  <button>Dynamically appear button</button>
<div>

I have a div which I want to be centered in two situation when it has one button and when it has 2 buttons. Is there a way to do that ?

I created a fiddle for it http://fiddle.jshell.net/frqo0rsy/ I want that want I show the button the two buttons will be next each other and also centered. I hope its more understood now.

You want to center the div and its content in respect to the body or center the content of the div in center of the div? — Arber Braja, Oct 03 '15 at 22:49
@Arber Braja it doesn't matter. I just added a fiddle so it could be more clearly — barak, Oct 03 '15 at 23:05

score 1 · Accepted Answer · edited May 23 '17 at 11:44

1

Treat the elements you want to center as inline or inline-block element and set text-align: center on the parent element.

button {
  display: inline-block;
}

div {
  text-align: center;
}

Updated your jsfiddle.

There are other ways of doing this depending on what you are trying to achieve; the answers to this question might help you.

edited May 23 '17 at 11:44

Community

1
1

answered Oct 03 '15 at 23:08

grim

6,669
11
38
57

Thanks @grim but i want the div to be one after another. I am not sure if it is possible cause in this case I should not put any width to the container div. – barak Oct 03 '15 at 23:25
1

@barak You mean on the same line like this: http://fiddle.jshell.net/frqo0rsy/3/ ? – grim Oct 03 '15 at 23:28
@barak or maybe just wrap the elements you want to center with a `div` or any other `block` element like the following: http://fiddle.jshell.net/frqo0rsy/4/ – grim Oct 03 '15 at 23:31
Thanks that exactly what I wanted I only knew to center div with margin: 0 auto; I don't really understand why people don't like my question – barak Oct 03 '15 at 23:36
@barak Maybe because you weren't specific enough. In any case, glad to help. – grim Oct 03 '15 at 23:37

How to center a div with dynamic content

1 Answers1