Layout ~ Alignment
Alignment. Solved.
Despite alignment being a fundamental design need, it is notoriously hard in CSS. Silva provides universal alignment classes that push content in any desired direction, no matter their type.
Intro
Elements inside cells and other layout containers can be aligned in any horizontal or vertical direction using utility classes.
Top left
Top center
Top right
Middle left
Middle center
Middle right
Bottom left
Bottom center
Bottom right
Align anything
Text, block, inline-block and replaced elements can all be aligned.
Middle center block
Middle center inline-block
Middle center inline
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Com
Bo
Alignment inside ratio cells
Ratio cells are layout containers that maintain a specific ratio between their width and height. The alignment utility classes can be used on such cells as well.
Top left
Top center
Top right
Middle left
Middle center
Middle right
Bottom left
Bottom center
Bottom right
Middle center div
Middle center inline-block
Middle center span
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Com
Bo
Multiple alignments
It is possible to combine multiple alignments within a single layout container.
Left
Center
Right
Left
Right
This is a long text on the left side, this is a test to see how it wraps.
Right