Introduction
This chapter demonstrates about the CSS Align in which several properties used to align the values following are the concepts covered in this chapter.
- CSS Align Property
Description
CSS Align property is used to align some elements to the web pages by using some values in which some are described below.
Center Align Elements
User can arrange the elements in horizontally center by using the margin: auto;. For which user will prevent stretching out to the edge of its container by setting the width. In which the element will take the specified width and the remaining space will be shared between the two margins. The code below demonstrates the center align elements.
[html]
<!DOCTYPE html>
<html>
<head>
<style>
.center {
margin: auto;
width: 60%;
border: 3px solid #0000ff;
padding: 10px;
}
</style>
</head>
<body>
<h2>Center Align Elements</h2>
<p>Simple Programming Lessons CSS Tutorials: auto;</p>
<div class="center">
<p><b>Note: </b>SPLESSONS CSS Tutorials.</p>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Align Image at Center
User can also align the image at the center by using the margin:auto; and user can make it as block element. The code below demonstrates the aligning the image at the center.
[html]
<!DOCTYPE html>
<html>
<head>
<style>
img {
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<h2>Center an Image</h2>
<p>To center an image, use margin: auto; and make it into a block element:</p>
<img src="splesson.png" alt="splessons" style="width:40%">
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Right Align and Left Align Using Float
User can arrange the elements in a right side or left side by using the float property. While aligning with the float user need to define the padding and margin for the <body> element which is used to avoid the visual differences in different browsers. The code below demonstrates the right align by using the float as shown.
[html]
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
}
.right {
float: right;
width: 300px;
background-color: #0000ff;
}
</style>
</head>
<body>
<h2>Right Align</h2>
<div class="right">
<p><b>Note: </b>SPLESSONS mission is to enhance our knowledge of programming by presenting several different articles to the viewers and by participating in knowledge enriching discussions on the website.</p>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Vertical Center Using Padding
User can arrange the elements at center in many ways vertically in CSS. In which user may get the element at center by using the padding. The code below demonstrates the center vertically by using the padding as shown.
[html]
<!DOCTYPE html>
<html>
<head>
<style>
.center {
padding: 70px 0;
border: 3px solid blue;
}
</style>
</head>
<body>
<h2>Center Vertically</h2>
<p>padding property is used to center the div element vertically:</p>
<div class="center">
<p>Simple Programming Lessons CSS Tutoriasl</p>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Vertical Center Using position and transform
User can arrange the elements center vertically by using the position and transform in which padding and line height is not an optional. The code below demonstrates the center vertically as shown.
[html]
<!DOCTYPE html>
<html>
<head>
<style>
.center {
height: 200px;
position: relative;
border: 3px solid blue;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h2>Centering</h2>
<p>user can used the positioning and the transform property to vertically and horizontally center the div element:</p>
<div class="center">
<p>Simple Programming Lessons</p>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Key Points
- While using flost user need to define margin and padding
- User can Align any elements in center.