Horizontal & Vertical Align

In the CSS layout, you can set the horizontal and vertical alignment of the element, such as centering the text or image vertically and horizontally.

text-align: left | right | center ;

vertical-align : baseline |length| sub |super | top | text-top | middle | bottom | text-bottom |initial | inherit ;

  • Horizontal & Vertical Align text
// Horizontal
p {
   text-align:center;   
}
//Vertical
span {
   display: inline-block;
   vertical-align: middle;
}
  • Horizontal & Vertical Align image
// Horizontal
img {
  display: block;
  /*margin-left | margin-right */
  margin: 0 auto;
  width: 50%;
}
//Vertical
img{
   vertical-align:baseline;   
}