CSS Layout – Horizontal & Vertical Align
Last Updated :
03 Aug, 2023
The Layout in CSS is used to control the flow of element inside another element. It sets the position of element in the web page. The position of element can be set by using horizontal and vertical alignment. There are many ways to set the position of element which are listed below:
Using Position Property:
Use position property to absolute to set the align left and right.
Syntax:
position: absolute;
Example:
html
<!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;">
GeeksForGeeks
</h1>
<h2>CSS Layout</h2>
</div>
</body>
</html>
|
Output:
Using text-align property:
Use the text-align property to set the horizontal alignment of an element. The text-align property can be set to left, right or center.
Syntax:
text-align: center;
Example:
html
<!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;">
GeeksForGeeks
</h1>
<h2>CSS Layout</h2>
</div>
</body>
</html>
|
Output:
Using float property:
Use the the float property to set the alignment of element. The float value can be set to left or right.
Syntax:
float: right;
Example:
html
<!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;">
GeeksForGeeks
</h1>
<h2>CSS Layout</h2>
</div>
</body>
</html>
|
Output:
Use Padding property Horizontally:
The padding property is used to set the element align Horizontally by using left and right padding.
Syntax:
padding: 0 100px;
Example:
html
<!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;">
GeeksForGeeks
</h1>
<h2>CSS Layout</h2>
</div>
</body>
</html>
|
Output:
Use Padding property Vertically:
The padding property is used to set the element align to Vertically by using top and bottom padding.
Syntax:
padding: 15px 0;
Example:
html
<!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;">
GeeksForGeeks
</h1>
<h2>CSS Layout</h2>
</div>
</body>
</html>
|
Output:
Line height property:
Line height is used to set the alignment vertically.
Syntax:
line-height: 40px;
Example:
html
<!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;">
GeeksForGeeks
</h1>
<h2>CSS Layout</h2>
</div>
</body>
</html>
|
Output:
Using margin property:
Margin property is used to set auto, and align horizontally a block element.
Syntax:
margin: auto;
Example:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS Layout
</title>
<style>
body {
width: 500px;
height: 150px;
border: 3px solid green;
}
#content {
margin: auto;
width: 300px;
height: 100px;
}
</style>
</head>
<body>
<div id="content">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>CSS Layout</h2>
</div>
</body>
</html>
|
Output:
Using Clearfix:
If any element is taller than its parent element and it is floated then it will overflow outside of its container. Overflow is set to auto to fix this.
Syntax:
overflow: auto;
Example:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS Layout
</title>
<style>
body {
width: 500px;
height: 150px;
border: 3px solid green;
}
#content {
overflow: auto;
}
</style>
</head>
<body>
<div id="content">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>CSS Layout</h2>
</div>
</body>
</html>
|
Output:
Using transform and positioning:
The transform property is used to transform an element relative to its parent element along with position to absolute.
Syntax:
position: absolute;
transform: translate(X%, Y%);
Example:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS Layout
</title>
<style>
body {
width: 500px;
height: 150px;
border: 3px solid green;
}
#content {
position: absolute;
transform: translate(50%, 10%);
}
</style>
</head>
<body>
<div id="content">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>CSS Layout</h2>
</div>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...