CODEWITHSUNDEEP
csshtmlcenter
Mihai Om
Mihai Om

Reputation: 261

how to center an inline div using css?

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)

Upvotes: 26

Views: 132501

Answers (5)

Guy Sopher
Guy Sopher

Reputation: 4462

This is the easiest and most straightforward solution

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

Upvotes: 7

katum
katum

Reputation: 121

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>

Upvotes: 12

meder omuraliev
meder omuraliev

Reputation: 186562

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

Upvotes: 2

mkoistinen
mkoistinen

Reputation: 7773

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;

Upvotes: 2

Moin Zaman
Moin Zaman

Reputation: 25435

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?

Upvotes: 21

Related Questions