CSS | Layout –
Horizontal & Vertical Align
The Layout in CSS is used to manage the flow of part within
another part. It sets the position of part within the web content. The position
of part are often set by using horizontal and vertical alignment. There are
many ways to line the position of part that ar listed below:
Syntax of css :
<!DOCTYPE
html>
<html>
<head>
<title>
CSS Layout
</title>
<style>
body{
width:
500px;
height:
150px;
border:
3px solid green;
}
#content{
position:
absolute;
}
</style>
</head>
<body>
<div id="content">
<h1 style =
"color:green;" >
Sayed 360
</h1>
<h2>CSS
Layout</h2>
</div>
</body>
</html>
Using text align property: Use text-align property to line the horizontal alignment of an element. The text-align property may be set to left, right or center.
Syntax of css :
<!DOCTYPE
html>
<html>
<head>
<title>
CSS Layout
</title>
<style>
body{
width:
500px;
height:
150px;
border:
3px solid green;
}
#content{
text-align:
center;
}
</style>
</head>
<body>
<div
id="content">
<h1 style =
"color:green;" >
Sayed 360
</h1>
<h2>CSS
Layout</h2>
</div>
</body>
</html> Output of css
Using float property: Use float property to line the alignment of part. The float price are often set to left or right
Syntax of css :
<!DOCTYPE
html>
<html>
<head>
<title>
CSS Layout
</title>
<style>
body{
width:
500px;
height:
150px;
border:
3px solid green;
}
#content{
float:
right;
}
</style>
</head>
<body>
<div
id="content">
<h1 style =
"color:green;" >
sayed 360
</h1>
<h2>CSS
Layout</h2>
</div>
</body>
</html> Output of css
Use padding property Horizontally: padding property is employed to line the part align to Horizontally by using left and right padding.
Syntax of css :
<!DOCTYPE
html>
<html>
<head>
<title>
CSS Layout
</title>
<style>
body{
width:
500px;
height:
150px;
border:
3px solid green;
}
#content{
padding: 0
100px;
}
</style>
</head>
<body>
<div
id="content">
<h1 style =
"color:green;" >
Sayed 360
</h1>
<h2>CSS
Layout</h2>
</div>
</body>
</html>
Output of css
Use padding property Vertically: padding property is employed to line the part align to Vertically by using prime and bottom padding.
Syntax of css :
<!DOCTYPE
html>
<html>
<head>
<title>
CSS Layout
</title>
<style>
body{
width: 500px;
height:
150px;
border:
3px solid green;
}
#content{
padding:
15px 0;
text-align:
center;
}
</style>
</head>
<body>
<div
id="content">
<h1 style =
"color:green;" >
Sayed 360
</h1>
<h2>CSS
Layout</h2>
</div>
</body>
</html>
Output of css
Line height property: Line height is employed to line the alignment vertically.
Syntax of css :
<!DOCTYPE
html>
<html>
<head>
<title>
CSS Layout
</title>
<style>
body {
width:
500px;
height:
150px;
border:
3px solid green;
}
#content {
line-height:
40px;
}
</style>
</head>
<body>
<div
id="content">
<h1 style =
"color:green;" >
Sayed 360
</h1>
<h2>CSS
Layout</h2>
</div>
</body>
</html>
Output of css
No comments:
Post a Comment