Align

Values that position/align element.

HTML apply alignment to elements with .block-{align} or .flex-{align} class.

Block

Foxy Doggo Katze
HTML
    <img class="image block-left" src="https://orangecss.com/images/thumbnails/square/fox-square.jpg" alt="Foxy" />

<img class="image block-center" src="https://orangecss.com/images/thumbnails/square/dog-square.jpg" alt="Doggo" />

<img class="image block-right" src="https://orangecss.com/images/thumbnails/square/cat-square.jpg" alt="Katze" />
  

Flex

Foxy Doggo Katze
HTML
    <img class="image flex-left" src="https://orangecss.com/images/thumbnails/square/fox-square.jpg" alt="Foxy" />

<img class="image flex-center" src="https://orangecss.com/images/thumbnails/square/dog-square.jpg" alt="Doggo" />

<img class="image flex-right" src="https://orangecss.com/images/thumbnails/square/cat-square.jpg" alt="Katze" />
  

Responsive

Apply responsive align to elements .{breakpoint}:block-{align} or .{breakpoint}:flex-{align} classes

Foxy Doggo Katze
HTML
    <img class="image block-left lg:block-center" src="https://orangecss.com/images/thumbnails/square/fox-square.jpg" alt="Foxy" />

<img class="image flex-center lg:flex-right" src="https://orangecss.com/images/thumbnails/square/dog-square.jpg" alt="Doggo" />

<img class="image flex-right lg:flex-left" src="https://orangecss.com/images/thumbnails/square/cat-square.jpg" alt="Katze" />
  

Usage

Attribute Description Possible values Type Required Default
role Set with .{role}-left class block or flex String - -
align Set with .block-{align} class left, center or right String - -