Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to center an inline div using css?

Tags:

html

css

center

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)

like image 756
Mihai Om Avatar asked Sep 06 '10 21:09

Mihai Om


People also ask

How do I center a div with inline CSS?

Simply add text-align center to parent div and set the child div display to inline-block. This will force our div to behave like inline element and therefore subjected text-align center. The difference between this method and margin: 0 auto is we don't need the width to be specified.

How do I center an inline list in CSS?

Just give the list centered text (e.g. ul. nav { text-align: center; } ) and the list items inline-block (e.g. ul. nav li { display: inline-block; } ). If you want to do it with margin for whatever reason, look into width: fit-content; .

How do you align inline elements?

Inline elements or inline-block elements such as text, anchor, etc. can be aligned vertically with the help of CSS padding, CSS line-height, or CSS vertical-align property. Block-level elements such as div, p, etc.


2 Answers

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?

like image 153
Moin Zaman Avatar answered Oct 11 '22 21:10

Moin Zaman


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>

like image 12
katum Avatar answered Oct 11 '22 19:10

katum