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)
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.
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; .
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.
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?
I solved this.
You should add new div
with text-align:center
outside your div
like this
<div style="text-align:center;"> <div>
which not in center with inline display </div></div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With