how to center an inline div using css?

Question

How can I center an inline div (not its content) using css?

VERY IMPORTANT: the width of the div is unknown (I can not specify it)

Answer 1

If by inline you mean, its CSS display property is set to inline then you can center it by giving the immediate parent container a text-align:center

If you mean a div within another div, you can follow this approach if you can add a wrapper and float both:

How to horizontally center a floating element of a variable width?

Answer 2

Wrap it into a div that you can specify the width of and then set the margins of the div in question to: margin: 0, auto;

Answer 3

I solved this. You should add new div with text-align:center outside your divlike this

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

which not in center with inline display </div></div>

Answer 4

This is the easiest and most straightforward solution

.center {
  display: table;
  margin: auto;
}

Answer 5

you can probably get away with display:inline-block and text-align:center; on the parent element if you want it it to be "blocky". also you'll probably need to give it a vertical-align:top