CSS Introduction
CSS Structure
CSS Colors
CSS Background
CSS Width-Height
CSS Float
CSS Display
CSS Borders
CSS Fonts
CSS Text
CSS Align
CSS List
CSS Margin
CSS Padding
CSS Position
CSS Tables
CSS Images
CSS Link
CSS Icons
CSS MAX MIN WIDTH-HEIGHT
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.
CSS Align use in a style code area - like: text-align: center/left/right; Where text-align = property name; center/left/right = property value;
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: right- for 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) float: left - for use control div/block floating left.
7) float: right - for use control div/block floating right.
<!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>
<!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
<!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>
<!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 .
<!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.
<!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.
<!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.
<!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>
