Align

Control the alignment of inline elements depending on the viewport size.

Usage

To align images or other elements with spacing between the text and the element, add one of these classes.

ClassDescription
.uk-align-leftFloats the element to the left and creates right and bottom margin.
.uk-align-rightFloats the element to the right and creates left and bottom margin.
.uk-align-centerCenters the element and creates bottom margin.
<img class="uk-align-left" src="" width="" height="" alt="" />
Copy to clipboard
  • Example image

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • <div class="uk-panel">
      <img
        class="uk-align-left uk-margin-remove-adjacent"
        src="/images/light.jpg"
        width="225"
        height="150"
        alt="Example image"
      />
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat.
      </p>
      <p>
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
        eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
        sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum
        dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua.
      </p>
    </div>

Responsive

UIkit provides a number of responsive alignment classes. Basically, they work just like the usual alignment classes, except that they have suffixes that represent the breakpoint from which they come to effect.

ClassDescription
.uk-align-left@s
.uk-align-right@s
Only affects device widths of 640px and higher.
.uk-align-left@m
.uk-align-right@m
Only affects device widths of 768px and higher.
.uk-align-left@l
.uk-align-right@l
Only affects device widths of 1024px and higher.
.uk-align-left@xl
.uk-align-right@xl
Only affects device widths of 1280px and higher.
<img
  class="uk-align-right@m uk-align-center"
  src=""
  width=""
  height=""
  alt=""
/>
Copy to clipboard
  • Example image

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • <div class="uk-panel">
      <img
        class="uk-align-right@m uk-align-center uk-margin-remove-adjacent"
        src="/images/light.jpg"
        width="225"
        height="150"
        alt="Example image"
      />
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat.
      </p>
      <p>
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
        eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
        sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum
        dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua.
      </p>
    </div>

Theme development

On your tailwind.config.js file, add the Align component within the ui() plugin.

import ui from "franken-ui";

ui({
    components: {
        align: {
            hooks: {},
            media: true
        }
    }
}),

Available hooks

Note If you are developing theme from scratch, you can use all these hooks. If you’re using the shadcn/ui theme, some hooks might not work as they were already in use or removed. Learn more about using hooks.

Hook NameAffected Classes
hook-misc*