AtoZ CSS Quick Tip: Float and Clear

F is for Float and Clear

Floating is great if you want to move an element to the left or right of a page, but unfortunately, you can’t do float:center to center an element. What a pain right?

Well, never fear, here's the low down on centering all sorts of elements.

Tip 1

If the element is a block element, you can combine width and margin:auto.

margin:auto will automatically calculate the margins on the left and right sides, so they're both equal, centering the block within its containing element.

See the Pen tip-margin-auto by SitePoint (@SitePoint) on CodePen.

Tip 2

If the element is inline (or inline-block), use text-align:center on the parent container.

See the Pen tip-flexbox by SitePoint (@SitePoint) on CodePen.

Tip 3

If the element is absolutely positioned, combine left and transform to center the element horizontally.

See the Pen tip-flexbox by SitePoint (@SitePoint) on CodePen.

Continue reading %AtoZ CSS Quick Tip: Float and Clear%

by Guy Routledge via SitePoint