HTML Guides for float

The float property accepts only left, right, inline-start, inline-end and none, and the invalid value that turns up most often is center.

A floated element moves to the left or right edge of its container, and the content after it wraps around it. CSS has no float: center, because content can't wrap around both sides of a box in the middle. Typos such as rigth, and values borrowed from other properties such as middle, trigger the same error.

Browsers drop a declaration whose value they don't recognize. The element keeps the float it would otherwise have, usually none, so float: center never centers anything. If an earlier rule floats the element left, it stays on the left.

To center a block, give it a width and set its left and right margins to auto. An image already has a width, but it's inline by default, so it also needs display: block. To center text and other inline content, put text-align: center on the parent. In a flex container, use justify-content: center.

Invalid example

<img src="logo.png" alt="Company logo" style="float: center;">

Valid example

<img src="logo.png" alt="Company logo" style="display: block; margin: 0 auto;">