Home
Basics
Introduction Adding styles Selectors Headings and Text Lists Links Tables Colors Background Box Model Fonts Icons Display Position Overflow Align Images Tool tips FlexAdvanced
Shadows Rounded Corners Units Specificity Responsive design Media Queries Grid Animations Psuedo elements CSS variables and functions SASS and SCSSMiscellaneous
CSS Templates CSS Interview QnAAlign elements using CSS
here is the list of align properties that can be used to align elements in HTML.- valign - vertical alignment of content of a table cell
- text-align - center|left|right|justify - Align text horizontally in block level element e.g. div
- align-content(flexbox) - stretch|center|flex-start|flex-end|space-between|space-around|space-evenly - it is related to flex-wrap. It aligns flex lines. e.g. When you have a container with width of 50px and height of 150px and you need to put 2 items in it of 50px in it, with flex-wrap on, second item will be wrapped to next line.
- justify-content(flexbox) - flex-start|flex-end|center|space-between|space-around|space-evenly|initial|inherit - It aligns items on main axis horizontally in flex box.
- align-items(flexbox) - stretch|center|flex-start|flex-end|baseline|initial|inherit - It aligns flex items. e.g. When flex-direction is row, items are aligned vertically in center with align-items:center.
- align-self(flexbox) - override the align-items property
Web development and Automation testing
solutions delivered!!