[css-page-floats] float: center?

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|

[css-page-floats] float: center?

Sam Davidson
Hi,

I'm just learning HTML and CSS, and it strikes me as odd that there is no float: center command. Intuitively, this would center a box in its containing element and also cause it to take the width of its contained text. I'm guessing this question arises out of ignorance, but why doesn't such a command exist? Perhaps it could be implemented in a future version of HTML?

I spent some time reading forums, and I found a functional workaround involving three layers of divs. This seems unnecessarily complex.

Thanks,
Sam
Reply | Threaded
Open this post in threaded view
|

Re: [css-page-floats] float: center?

Oriol Bugzilla

> Intuitively, this would center a box in its containing element and also cause it to take the width of its contained text


A CSS WG member would probably explain it better, but floats do more than alignment and shrink-to-fit.

They are also out-of-flow and have some behaviors which might not be obvious how should generalize in float:center or other arbitrary positions.


If you only want centering and shrink-to-fit, you can use

margin: 0 auto; /* Center horizontally */
width: fit-content; /* shrink-to-fit */
The latter may need vendor prefixes.

Other possibilities are display:inline-block, CSS tables, flexbox, etc.

Oriol
Reply | Threaded
Open this post in threaded view
|

Re: [css-page-floats] float: center?

fantasai
On 08/09/2016 01:54 PM, Oriol Bugzilla wrote:

>> Intuitively, this would center a box in its containing element and also cause it to take the width of its contained text
>
>
> A CSS WG member would probably explain it better, but floats do more than alignment and shrink-to-fit.
>
> They are also out-of-flow and have some behaviors which might not be obvious how should generalize in |float:center| or other
> arbitrary positions.
>
>
> If you only want centering and shrink-to-fit, you can use
>
> |margin: 0 auto; /* Center horizontally */ width: fit-content; /* shrink-to-fit */|
>
> The latter may need vendor prefixes.
>
> Other possibilities are |display:inline-block|, CSS tables, flexbox, etc.

And soon, 'justify-content: center'. :)

~fantasai