Align 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!!