CSS Horizontal and 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 and Vertical Align

CSS horizontal and vertical align is a powerful tool for aligning elements in web design. It allows you to control the alignment of elements on the page in relation to other elements, as well as the page itself. This can be especially useful when creating a layout that needs to be consistent across all devices and browsers. CSS horizontal and vertical align can also be used to create interesting visual effects, such as centering an element on the page.

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.

CSS horizontal and vertical-align is accomplished using the “text-align” and “vertical-align” properties. The “text-align” property is used to specify the horizontal alignment of an element. It can be set to “left”, “right”, “center”, or “justify”. The “vertical-align” property is used to specify the vertical alignment of an element. It can be set to “top”, “middle”, or “bottom”.

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