saftutorials.com
CSS Align Tutorial

CSS Align is on of the most important property of CSS. CSS Align control text alignment, div/block alignment, image alignment and more.

By this tutorials you can learn

1) How to use CSS Align?

2) Kinds of CSS Align?

3) Example of CSS Align.


How to use CSS Align?

CSS Align use in a style code area -  like:  text-align: center/left/right; Where text-align = property name; center/left/right = property value;

Kinds of CSS Text Property Style?

1) text-align: center - for use control text alignment is center.

2) text-align: left for use control text alignment is left.

3) text-align: rightfor use control text alignment is right.

4) line-height***px for use control text vertically alignment center.

5) margin: auto for use control div/block center.

6) floatleft for use control div/block floating left.

7) floatright for use control div/block floating right.

8) imagealignfor use control div/block floating right.

CSS Text Align Center

CSS Text Align Center examples.
<!DOCTYPE html>
<html>
<head>
  <title>Example of CSS Text Align Center.</title>
  <style type="text/css">
    h2{text-align:center;color:green;}
  </style>
</head>
<body>
<h2>Example for Text Align Center.</h2>
</body>
</html>

Example of CSS Fonts Styles.

Example for Text Align Center.


CSS Text Align Left

CSS Text Align Left
<!DOCTYPE html>
<html>
<head>
  <title>Example of CSS Text Align Left.</title>
  <style type="text/css">
    h2{text-align:left;color:green;}
</style> </head> <body> <h2>Example for Text Align Left</p></div>
</body> </html>

Example for Text Align Left


CSS Text Align Right

CSS Text Align Right examples.
<!DOCTYPE html>
<html>
<head>
  <title>Example of CSS Align Right.</title>
  <style type="text/css">
    h2{text-align:right;color:green;}
  </style>
</head>
<body>
<h2>Example for border solid.</h2>
</body> </html>

Example of CSS Fonts Styles.



Example for CSS Text align right

CSS Text Vertical Align Middle

CSS Text Vertical Align Middle examples.
<!DOCTYPE html>
<html>
<head>
  <title>Example of CSS Vertical Align Middle .</title>
  <style type="text/css">
    .saf{widht:50%;height:100px;line-height:100px;border:1px solid green;float: left;}
  </style>
</head>
<body>
<div class="saf">Example for CSS Text Vertical Align Middle examples.</div>
</body>
</html>

Example for Vertical Align Middle . 





CSS Margin Auto for using Div/Block center

CSS Margin Auto examples.
<!DOCTYPE html>
<html>
<head>
  <title>Example of CSS Margin auto.</title>
  <style type="text/css">
    .saf-ma{width:300px;height:100px;border:2px dashed red;margin:auto;text-align:center;}
  </style>
</head>
<body>
<div class="saf-ma">
Example for Div/Block Center.
</div>
</body>
</html>

Example for CSS Margin auto.

CSS Float Left for using Div/Block Left 

CSS Float Left examples.
<!DOCTYPE html>
<html>
<head>
  <title>Example of CSS Float Left.</title>
  <style type="text/css">
    .saf-fl{width:300px;height:100px;border:2px dashed red;float:left;text-align:center;}
  </style>
</head>
<body>
<div class="saf-fl">
Example for Div/Block Left.
</div>
</body>
</html>

Example for CSS Float Left.




CSS Float Left for using Div/Block Right 

CSS Float Right examples.
<!DOCTYPE html>
<html>
<head>
  <title>Example of CSS Float Left.</title>
  <style type="text/css">
    .saf-fr{width:300px;height:100px;border:2px dashed red;float:right;text-align:center;}
  </style>
</head>
<body>
<div class="saf-fr">
Example for Div/Block Left.
</div>
</body>
</html>

Example for CSS Float Right.




CSS Image Align Center using text align center

CSS Float Right examples.
<!DOCTYPE html>
<html>
<head>
  <title>Example of CSS Image Align Center.</title>
  <style type="text/css">
    .saf-img{text-align:center;}
                .saf-img img{height:200px;margin:auto;}
  </style>
</head>
<body>
<div class="saf-img">
<img src="../uploads/sample.png">
</div>
</body>
</html>

Example for CSS Image Align center.


Find us on

Facebook Google Plus Twitter Pinterest YouTube

web statistic