<!DOCTYPE html>
<html lang="en">
<head>
<title>Text Alignment</title>
<style type="text/css">
p.text_left{ text-align:left;}
p.text_center{ text-align:center;}
p.text_right{ text-align:right;}
</style>
</head>
<body>
<h4>Text Alignment</h4>
<p class="text_left">This is text "Left alignment".</p>
<p class="text_center">This is text "Center alignment".</p>
<p class="text_right">This is text "Right alignment".</p>
</body>
</html>
This is text "Left alignment".
This is text "Center alignment".
This is text "Right alignment".
<!DOCTYPE html>
<html>
<head>
<title>Image Alignment</title>
<style>
img {
display: block;
margin:0px auto;
}
</style>
</head>
<body>
<h2>Image Alignment</h2>
<p>This image is Center</p>
<img src="images/background_images.jpg" alt="Free Time Learning" />
</body>
</html>
This image is Center
<!DOCTYPE html>
<html>
<head>
<title>Center Alignment</title>
<style type="text/css">
div{
width: 50%;
margin: 0 auto;
padding: 15px;
font-size:26px;
background: #9C0;
}
</style>
</head>
<body>
<div>Center Alignment</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Left and Right Alignments with CSS floating</title>
<style type="text/css">
div {
width: 150px;
padding: 10px;
color:#FFF;
font-size:18px;
}
div.left_alignment {
float: left;
background: #F60;
}
div.right_alignment {
float: right;
background:#9C0;
}
</style>
</head>
<body>
<div class="left_alignment">left align.</div>
<div class="right_alignment">right align.</div>
</body>
</html>