CSS | Layout – Horizontal & Vertical Align
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:
<!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> |
chevron_right
filter_none
Output:
Using text align property: Use 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:
<!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> |
chevron_right
filter_none
Output:
Using float property: Use float property to set the alignment of element. The float value can be set to left or right.
Syntax:
float: right;
Example:
<!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> |
chevron_right
filter_none
Output:
Use Padding property Horizontally: Padding property is used to set the element align to Horizontally by using left and right padding.
Syntax:
padding: 0 100px;
Example:
<!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> |
chevron_right
filter_none
Output:
Use Padding property Vertically: Padding property is used to set the element align to Vertically by using top and bottom padding.
Syntax:
padding: 15px 0;
Example:
<!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> |
chevron_right
filter_none
Output:
Line height property: Line height is used to set the alignment vertically.
Syntax:
line-height: 40px;
Example:
<!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> |
chevron_right
filter_none
Output:
Using margin property: Margin property is used to set auto, align horizontally a block element.
Syntax:
margin: auto;
Example:
<!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> |
chevron_right
filter_none
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:
<!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> |
chevron_right
filter_none
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:
<!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> |
chevron_right
filter_none
Output:
Recommended Posts:
- CSS | vertical-align Property
- Computer Organization | Horizontal micro-programmed Vs Vertical micro-programmed control unit
- HTML | Layout
- CSS | Website Layout
- CSS | table-layout Property
- CSS | Grid Layout Module
- Advance CSS layout with flexbox
- Best way to make a d3.js visualization layout responsive
- How to make horizontal line with words in the middle using CSS?
- How to make a div fill a remaining horizontal space using CSS?
- How to display multiple horizontal images in Bootstrap card ?
- CSS | Align
- CSS | align-self Property
- HTML | <tr> align Attribute
- HTML | <img> align Attribute
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.
