CSS : Align Property

In HTML we can align elements horizontally and vertically by using various CSS properties like text-align, margin, position, float, padding etc.

text-align : The text-align property is used to set the horizontal alignment of text. The values of text align property are center, left, right or justify. Where the value justify set both the side (left and right) equal like books or newspaper.

Syntax :
 text-align: left|right|center|justify;
Example :
<!DOCTYPE>
<html>
<head>
  <title>Text-Alignment</title>
</head>
<body>
  <p style="text-align: left;">Hello world First</p>
  <p style="text-align: right;">Hello world Second</p>
  <p style="text-align: center;">Hello world Third</p>
  <p style="text-align: justify;">Hello world, This is the fourth paragraph of the text page to test the value justy.</p>
</body>
</html>
Output :

Hello world First
Hello world Second
Hello world Third
Hello world, This is the fourth paragraph of the text page to test the value justy.

margin : The margin property is used to define the space around HTML elements. In margin property there are four possible values : top-margin, bottom-margin, left-margin and right-margin.

Example :
<html>
<head>
  <style> 
    div {
      width: 200px;
      border: 2px solid blue;
      background-color: orange;
      text-align: center;
      padding: 10px;
      margin-top: 50px;
      margin-bottom: 50px;
      margin-left: 350px;  
      margin-right: 350px;
    }
  </style>
</head>
<body>
  <div>CSS Margin Property Test.</div>
</body>
</html>
Output :

CSS Margin Property Test.

position : The position property is used to set the position of an element in html document. By with position property we can specifies what kind of positioning method used for an element. There are five possible values for position property, which are static, relative, fixed, absolute and sticky. Lets see an example with value absolute.

Example :
<html>
<head>
  <title>CSS Position Property</title>
  <style>
    div {
      position: absolute;
      border: 2px solid #4f4f4f;
      width: 260px;
      left: 150px;
      top: 80px;
    }
  </style>
</head>
<body>
  <p>Text with Absolute Position:</p>
  <div>Hello world. This is the test paragraph.</div>
</body>
</html>
Output :

Text with Absolute Position:
Hello world. This is the test paragraph.

float : The CSS float property is used to specify how an element should float on a web page and wrap around left or right side from another element. The possible values of float property are left, right, initial and inherit.

Example :
<html>
<head>
  <style> 
    img {
      float: right;
      width:150px;
      height: 125px;
    }
  </style>
</head>
<body>
  <h3>What is computer? Explain in Brief.</h3>
  <p>
    <img src="computer.jpg">
    A computer is a device that can be instructed to carry out sequences of 
    arithmetic or logical operations automatically via computer programming. 
    Modern computers have the ability to follow generalized sets of operations, 
    called programs. These programs enable computers to perform an extremely 
    wide range of tasks.</p>
</body>
</html>
Output :

What is computer? Explain in Brief.

A computer is a device that can be instructed to carry out sequences of arithmetic or logical operations automatically via computer programming. Modern computers have the ability to follow generalized sets of operations, called programs. These programs enable computers to perform an extremely wide range of tasks.

padding : The padding property is used to control the space between the border and the content in a table.

Example :
<html>
<head>
  <style> 
    div {
      padding: 50px;
    }
  </style>
</head>
<body>
  <div>CSS Margin Property Test.</div>
</body>
</html>
Output :

CSS Margin Property Test.


Next Topic :