CSS Alignment techniques
One common task that is frequently requested in web development is aligning elements using CSS. While this may sound simple, it can become confusing due to the absence of a single specific way to achieve it.
I have curated a CodePen collection to demonstrate various alignment techniques.
Each CodePen in the collection showcases a grid representing a board containing sticky notes. The notes are displayed in different positions on the board, as shown in the following image:
Alignment Techniques
- Margin
- Line-height
- Table-cell
- Positions
- Flex
Margin
Using the margin
property, it is easy to horizontally center the elements. However, for vertical alignment, you would need to calculate the height or use the calc
function.
The required properties are as follows:
margin-top
margin-right
margin-bottom
margin-left
Alternatively, you can use the shorthand property margin
.
Here is the corresponding CodePen.
Line-height
Using line-height
allows for precise alignment of elements. However, if the text spans multiple lines within the element, it may not fit perfectly.
The required properties are:
-
text-align
-> for horizontal alignment -
vertical-align
-> for vertical alignment -
line-height
-> defines the size of the line
Here is the corresponding CodePen.
Table-cell
Using display: table-cell
, the vertical alignment is unaffected by font size or line height. However, this technique only applies to inline elements.
The required properties are:
display: table-cell
text-align
vertical-align
Here is the corresponding CodePen.
Positions
This is one of the most commonly used techniques for positioning elements.
The required properties are:
position: relative
position: absolute
top
right
bottom
left
transform: translate(x, y)
Here is the corresponding CodePen.
Flex
The display: flex
property, introduced with CSS3, makes it incredibly simple and intuitive to align elements. Additionally, this technique is more accommodating for different writing systems, which is useful if you intend to display your page in countries with diverse writing forms.
The required properties for containers are:
display: flex
justify-content
align-items
Here is the corresponding CodePen.
Conclusion
The best technique to employ will depend on your specific use case and page architecture.
Last but not least, the inspiration for this article came from the notes I took during the CSS Grid course on Platzi, which I highly recommend for Spanish speakers or those who understand Spanish.
Top comments (0)