CSS | Align
In CSS we align items horizontally and vertically. Various methods and techniques are used to center them, take care of the left and the right margin, etc.
The use of methods discussed below:
- margin:auto: This property is used to align a block element into center.
Example-1:<!DOCTYPE html><html><head><style>.center {margin: auto;width: 60%;border: 3px solid #73AD21;padding: 10px;}</style></head><body><h1style="color:green;">GeeksForGeeks</h1><h2>Center Align Elements</h2><divclass="center">This is div element on whichmargin auto is used to horizontallyalign it into center</div></body></html>chevron_rightfilter_noneNote: Using margin:auto will not work in IE8, unless a !DOCTYPE is declared.
Output :
- position: absolute; We can align the items using this property.
Example-2:
<!DOCTYPE html><html><head><style>.right {position: absolute;right: 0px;width: 300px;border: 3px solid #73AD21;padding: 10px;}</style></head><body><h1style="color:green;">GeeksForGeeks</h1><h2>Right Align</h2><divclass="right"><p>Absolute positionedelements can overlap otherelements.</p></div></body></html>chevron_rightfilter_noneOutput :
- text-align: center;We can align any text written in HTML at center. we can use this property in various kinds tags.
Example-3:<!DOCTYPE html><html><head><style>.center {text-align: center;border: 3px solid green;}</style></head><body><h1style="color:green;text-align: center;">GeeksForGeeks</h1><h2>BOTH TEXTS ARE AT CENTER</h2><divclass="center"><p>This text is centered.</p></div></body></html>chevron_rightfilter_noneOutput :
- padding: To vertically align items we can use padding.
Example-4:<!DOCTYPE html><html><head><style>.center {padding: 70px 0;border: 3px solid green;}</style></head><body><h1style="color:green;text-align:center;">GeeksForGeeks</h1><h2>Center Vertically</h2><divclass="center"><p>This is vertically centered.</p></div></body></html>chevron_rightfilter_noneOutput :
- padding & text-align; To align the text both vertically and horizontally using a combination of padding and text-align: center.
Example-5:<!DOCTYPE html><html><head><style>.center {padding: 70px 0;border: 3px solid green;text-align: center;}</style></head><body><h1style="color:green;">GeeksForGeeks</h1><p>Here we use padding and text-alignto center the div element verticallyand horizontally:</p><divclass="center"><p>This text is verticallyand horizontally centered.</p></div></body></html>chevron_rightfilter_noneOutput :
