कैसे करें - डीआईवी में एक बटन को केंद्र में रखें
CSS के साथ एक बटन तत्व को लंबवत और क्षैतिज रूप से केन्द्रित करने का तरीका जानें।
एक बटन को लंबवत कैसे केन्द्रित करें
उदाहरण
<style>
.container {
height: 200px;
position:
relative;
border: 3px solid green;
}
.vertical-center {
margin: 0;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
</style>
<div
class="container">
<div class="vertical-center">
<button>Centered Button</button>
</div>
</div>
लंबवत और क्षैतिज रूप से केंद्र कैसे करें
उदाहरण
<style>
.container {
height: 200px;
position:
relative;
border: 3px solid green;
}
.center {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform:
translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
<div
class="container">
<div class="center">
<button>Centered Button</button>
</div>
</div>
आप चीजों को केंद्र में रखने के लिए फ्लेक्सबॉक्स का भी उपयोग कर सकते हैं:
उदाहरण
.center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid
green;
}
युक्ति: तत्वों को संरेखित करने के बारे में अधिक जानने के लिए हमारे सीएसएस संरेखण ट्यूटोरियल पर जाएं।
युक्ति: तत्वों को स्केल करने के तरीके के बारे में अधिक जानने के लिए हमारे CSS ट्रांसफ़ॉर्म ट्यूटोरियल पर जाएँ।
युक्ति: अधिक फ्लेक्सबॉक्स जानने के लिए हमारे सीएसएस फ्लेक्सबॉक्स ट्यूटोरियल पर जाएं।