RE: float:center (was: Re: Alignment property proposal)

Anne van Kesteren wrote:
 
> Brad Kemper <brkemper@comcast.net>  
> wrote:
> > float:center would also be darn useful.
> 
> Every now and then someone suggests this and I tend to ignore those  
> e-mails as I've no idea how this would realistically work, but asking is  
> probably better so I get an understanding of what people expect this  
> feature to do. For instance, what would the result be of applying  
> float:center on the <span> element below:
> 
>    <div><span>TEXT</span> FOO BAR BAZ.</div>
> 
> Explaining with what kind of layouts float:center can help, and how it  
> helps, would be most useful. That might be able to take the request to the  
> next level.


Yeah, float center does sound bazaar :p. In your example, the floated text would simply float to the center of its' containing block.

FOO BAR |TEXT| BAZ ZOO
FAZ ZAR RAZ ROZ

The inline boxes simply flow around both sides of the float. If two or more center floated boxes can fit side by side, then the first box in the source begins on the left of a row of floats for ltr direction or on the right for a row of floats for rtl direction. Clearing of floats would be archived with: left, right, both (both directions); and the additional values: center, left center, right center, left right.

Apart from simply being able to center (horizontally align) an image in a box I see a good use case in a photo gallery. These are commonly markup in unordered list. The down size with this approach is when you have a fluid width gallery, as the viewpoint is widened or narrowed, the central balance that is easily achieved with a fixed width gallery is destroyed each time a float drops or jumps up. The larger the images, the more oblivious this unbalanced in the layout is. Extra margins and paddings are sometimes added to work around this unbalance between individual floats which adds to this overall unbalance of the gallery as a whole. A Test case.

http://css-class.com/test/demos/thumbgallery1.htm

Another test case using negative margins on a container to achieved some balance at various intervals when resizing the width of the viewpoint. This is how would believe center floated boxes would behave.

http://css-class.com/test/demos/thumbgallery2.htm

Theoretically the behavior of a center floated element would be divided. The left edge would behave as a left floated element and the right edge would behave as a right floated element. Can this be implemented? I wouldn't know.

Alan

http://css-class.com/

Received on Thursday, 27 December 2007 14:59:11 UTC