The UIkit text align component controls the alignment of inline element. It aligns the inline elements in the left, center or right direction.
The UIkit align component provides the following predefined classes:
.uk-align-left: It floats the element to the left and creates the right and bottom margin..uk-align-right: It floats the element to the right and creates the left and bottom margin..uk-align-center: It centers the element and creates a bottom margin.Source Code
<div class="uk-panel">
<img class="uk-align-left uk-margin-remove-adjacent"
src="https://picsum.photos/seed/picsum/200/200" width="225" height="150" alt="Example image" />
<p>sudhakarinfotech provides various front-end and back-end technology for web development.
You have to learn one by one so that you can learn easily.
</p>
<p>sudhakarinfotech provides HTML5,CSS3,JS,JQUERY,Ajax,Json,PHP,MySQL,etc Tutorials.</p>
</div>
Source Code: Output
The above source code result will be:
sudhakarinfotech provides various front-end and back-end technology for web development. You have to learn one by one so that you can learn easily.
sudhakarinfotech provides HTML5,CSS3,JS,JQUERY,Ajax,Json,PHP,MySQL,etc Tutorials.
UIkit provides a number of responsive classes that will come into action after the specific breakpoint.
| Class | Description |
|---|---|
.uk-align-left@s
.uk-align-right@s
|
Only affects device having widths >=640px. |
.uk-align-left@m
.uk-align-right@m
|
Only affects device having widths >=960px. |
.uk-align-left@l
.uk-align-right@l
|
Only affects device having widths >=1200px. |
.uk-align-left@xl
.uk-align-right@xl
|
Only affects device having widths >=1600px . |
General Syntax
<img class="uk-align-center uk-align-right@m" src="aligned-image.jpg" alt="Responsive Image Alignmnet">
Source Code
<div class="uk-panel">
<img class="uk-align-center uk-align-right@m uk-margin-remove-adjacent"
src="https://picsum.photos/seed/picsum/200/100" width="225" height="150" alt="image" />
<p>sudhakarinfotech provides step by step guide to learn the basic concept with the help of various example.</p>
<p>You can learn front-end and back-end technology step by step.</p>
</div>
Source Code: Output
The above source code result will be:
sudhakarinfotech provides step by step guide to learn the basic concept with the help of various example.
You can learn front-end and back-end technology step by step.
