The Tabler layout align middle icon visually represents the alignment of elements to the vertical center of a container, commonly used in UI design to ensure consistent and balanced visual spacing.
Common uses
- Centering text blocks vertically within a card.
- Aligning form labels with their input fields.
- Distributing items evenly along a vertical axis.
Use it in React
Install
npm i @tabler/icons-reactImport & render
import { IconLayoutAlignMiddle } from '@tabler/icons-react';
<IconLayoutAlignMiddle size={24} stroke={2} />Styles
Tabler ships this icon in 2 styles — each its own import:
outline
<IconLayoutAlignMiddle size={24} stroke={2} />filled
<IconLayoutAlignMiddleFilled size={24} stroke={2} />Details
- Library
- Tabler (5,093 icons)
- License
- MIT
- viewBox
0 0 24 24- Category
- Design
- Keywords
- positiondesignlayoutalignmiddlecreativeartisticvisualaestheticstylevertical centercenter alignmiddle alignmentalign center
FAQ
- What does the layout align middle icon represent?
- It signifies the vertical centering of elements within a defined space, ensuring they are positioned equidistant from the top and bottom edges.
- How do I use this icon in React?
- You can import and use it with: import { IconLayoutAlignMiddle } from '@tabler/icons-react'
- What is the license for this icon?
- This icon is distributed under the MIT license.
Related icons
The same idea in other libraries, and near matches in Tabler.