CSS Horizontal & Vertical Align

• CSS – Introduction
• CSS – Basics
• CSS – Include CSS File to HTML
• CSS – ID and Class
• CSS – Cascading Order
• CSS – Selector
• CSS – Pseudo Classes
• CSS – Colors
• CSS – Gradients
• CSS – Units
• CSS – Background
• CSS – Border
• CSS – Margin and Padding
• CSS – Height and Width
• CSS – Outline
• CSS – Display and Visibility
• CSS – Position
• CSS – Overlapping Elements
• CSS – Overflow
• CSS – Float
• CSS – Clear and Clearfix
• CSS – Left and Right
• CSS – Transform
• CSS – Opacity / Transparency
• CSS – text-shadow
• CSS – box-shadow
• CSS – object-fit
• CSS – Counters
• CSS – Variables
• CSS – Fonts
• CSS – Text Formatting
• CSS – Graphics
• CSS – Links
• CSS – Lists
• CSS – Tables
• CSS – Horizontal & Vertical Align
• CSS – Image Sprite
• CSS – Transitions
• CSS – 2D Transforms
• CSS – 3D Transforms
• CSS – Animations
• CSS – Media Queries
• CSS – Flexbox

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;   
}