CSS Align
In this page:
selector {
margin: 0 auto;
text-align: center;
vertical-align: middle;
}Text Blocks को Align करना
text-align property block containers के अंदर text की alignment control करती है, left, right, center, और justify options offer करते हुए। यह property बिल्कुल word processors में standard text alignment options जैसी behave करती है।
- visual style के लिए headings को center करें, लेकिन body text को पढ़ने में आसान बनाने के लिए left-aligned रखें।
- Accepted values:
- text-align — left | right | center | justify | start | end
- margin: 0 auto — एक set width वाले block को center करता है
- margin-left: auto — किसी block को दाईं तरफ़ धकेलता है
- position: absolute और transform के साथ — किसी parent में center करता है
- vertical-align — inline content को vertically align करता है
उदाहरण: Aligning Text Blocks
<style>
p {
text-align: center;
}
</style>
<p>Centered text block</p>Auto Margins से Block Elements को Center करना
किसी block-level container (जैसे div layout card) को अपने page पर horizontally center करने के लिए, आप एक defined width या max-width को auto margins (margin: 0 auto) के साथ जोड़ सकते हैं। यह browser को दोनों तरफ़ की बची हुई space calculate करने और उसे बराबर बाँटने का instruction देता है, block को center करते हुए।
- Margin auto सिर्फ उन block-level elements पर काम करता है जिनकी एक defined width या max-width है।
- Accepted values:
- margin: 0 auto — width वाले block को center करता है
- auto — बची हुई space को बाँटता है
- text-align: center — inline content को center करता है
- width / max-width — margin auto को कुछ भी करने के लिए ज़रूरी
उदाहरण: Centering Block Elements with Auto Margins
<style>
.box {
width: 200px;
margin: 0 auto;
background: lightblue;
padding: 10px;
text-align: center;
}
</style>
<div class="box">Centered block</div>Inline-block Elements को Align करना
क्योंकि inline-block elements बाकी text elements के साथ inline बैठते हैं, आप अपने parent container पर text-align: center लागू करके उन्हें आसानी से horizontally center कर सकते हैं।
उदाहरण: Aligning Inline-block Elements
<style>
.parent {
text-align: center;
}
.btn {
display: inline-block;
background: royalblue;
color: white;
padding: 8px 16px;
}
</style>
<div class="parent">
<span class="btn">Centered inline-block</span>
</div>Flexbox से Perfect Centering
CSS में elements को vertically align करना historically मुश्किल था, complex padding hacks चाहिए होते थे। Flexbox display properties (जैसे align-items: center और justify-content: center) देकर इसे solve करता है ताकि elements को दोनों axes पर सिर्फ कुछ lines code से perfectly center किया जा सके।
- elements को vertically और horizontally दोनों तरफ़ center करने के लिए Flexbox display properties इस्तेमाल करें।
- Accepted values:
- justify-content: center — main axis के साथ center करता है
- align-items: center — cross axis के साथ center करता है
- display: flex — container पर ज़रूरी
- place-items: center — grid में, दोनों करता है
उदाहरण: Perfect Centering with Flexbox
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 150px;
background: #eee;
}
.container div {
background: coral;
padding: 10px;
}
</style>
<div class="container">
<div>Centered on both axes</div>
</div>Absolute Position से Perfect Centering
अगर आपको किसी ऐसे element को center करना है जो normal page flow से हटाया गया है (जैसे एक absolute-positioned modal या pop-up), तो आप top और left offsets को 50% set करके, दोनों axes पर -50% के translate transform के साथ combine करके उसे center कर सकते हैं।
- perfectly centered modal containers या floating notifications बनाने के लिए इस absolute positioning technique इस्तेमाल करें।
- Accepted values:
- top: 50%; left: 50% — corner को center पर move करता है
- transform: translate(-50%, -50%) — इसे अपने आधे size से वापस खींचता है
- position: absolute — ज़रूरी, एक positioned parent के साथ
- inset: 0; margin: auto — एक set size के साथ एक alternative
उदाहरण: Perfect Centering with Absolute Position
<style>
.parent {
position: relative;
height: 150px;
background: #eee;
}
.modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
border: 1px solid #ccc;
padding: 10px;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
</style>
<div class="parent">
<div class="modal">Centered modal</div>
</div>- spans जैसे inline elements पर margin auto लागू करना, जिसे browsers नज़रअंदाज़ कर देते हैं।
- block-level divs को horizontally center करने के लिए div पर ही text-align: center इस्तेमाल करने की कोशिश करना, उसके parent पर नहीं।
- absolute elements को center करने की कोशिश करते समय parent containers पर position: relative जोड़ना भूल जाना।
- text-align property इस्तेमाल करके block containers के अंदर text को align करें।
- block-level cards को एक defined width या max-width को auto margins के साथ जोड़कर horizontally center करें।
- elements को आसानी से दोनों axes पर perfectly center करने के लिए modern Flexbox display properties इस्तेमाल करें।
Standard alignment properties, basic Flexbox controls, और absolute centering techniques हर web browser द्वारा natively supported हैं।
Chapter Quiz — Complete all 14 topics to unlock
0/14 topics done
Complete these topics first: