Menu
I need some divs to be center-positioned and to fit their content width at the same time.
I am now doing it like this:
.mydiv-centerer{ text-align: center; .mydiv { background: none no-repeat scroll 0 0 rgba(1, 56, 110, 0.7); border-radius: 10px 10px 10px 10px; box-shadow: 0 0 5px #0099FF; color: white; margin: 10px auto; padding: 10px; text-align: justify; width: -moz-fit-content; } } Now, the last command "width: -moz-fit-content;" is exactly what I need!
Only problem is.. it works only on Firefox.
I also tryed with "display:inline-block;", but I need these divs to behave like divs. Namely, every next div should be under, and not inline, the previous.
Do you know any possible cross-browser solution?
630
The fit-content behaves as fit-content(stretch) . In practice this means that the box will use the available space, but never more than max-content . When used as laid out box size for width , height , min-width , min-height , max-width and max-height the maximum and minimum sizes refer to the content size.
fit-content as min- or max-widthYou can also use fit-content as a min-width or max-width value; see the example above. The first means that the width of the box varies between min-content and auto, while the second means it varies between 0 and max-content.
-moz-fit-content will fit the content and wrap the text, but -moz-max-content will extend outside of the parent element. Same applies for Chrome's -webkit-max-content and fit-content .
Using inline-block property: Use display: inline-block property to set a div size according to its content.
At last I fixed it simply using:
display: table; 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