CSS Horizontal & Vertical Align

The CSS Align property is used to define the horizontal and vertical alignment of an inline or table-cell box.

Align Elements

  • text-align: center
  • text-align: right
  • vertical-align
  • float property

CSS text-align: center Property

CSS text-align: center property use to align the text content to the center of the div:

Example of text-align: center

.div {
     background-color: red;
     border: 1px solid green;
     padding: 10px;
     height: 50px;
     text-align: center;
     color: #fff;
  }

Output

Hello! This is a text-line with text-align:center property

CSS text-align: right Property

CSS text-align: right property use to align the text content to the right of the div:

Example of text-align: right

.div {
     background-color: #fff;
     border: 1px solid green;
     padding: 10px;
     height: 50px;
     text-align: right;
     color: red;
  }

Output

Hello! This is a text-line with text-align:right property

CSS vertical-align Property

CSS vertical-align property use to align an image vertically with the text by using vertical-align property:

Example of vertical-align

.div {
     background-color: #fff;
     padding: 10px;
     color: red;
  }

Output

Hello!

CSS float Property

CSS float property use to align elements:

Example of float

.div {
     background-color: #fff;
     border: 1px solid green;
     padding: 10px;
     width: 200px;
     float: right;
     color: green;
  }

Output

Hello! This is a text-line with float CSS property

Policy

GDATAMART.COM is optimized for learning & job information; The users try to improve your knowledge and practical experience through this site but we cannot warrant full correctness of all content... Learn More → | Sitemap →

© 2020 GDATAMART | All Rights Reserved