इसलिए, मैं CSS
स्थिति और परिवर्तन विधि का उपयोग करके एक div
लंबवत केंद्रित बनाने की कोशिश कर रहा हूं लेकिन जाहिर तौर पर यह div
को थोड़ा क्षैतिज रूप से केंद्रित कर रहा है। यहाँ मेरा कोड है:
एचटीएमएल:
<div class="row container-fluid top_header">
<div class="col-12 container-xl">
<div class="top_header_texts"></div>
</div>
</div>
सीएसएस:
.top_header {
box-sizing: border-box;
background-image: radial-gradient(circle at 19% 90%, rgba(190, 190, 190,0.04) 0%, rgba(190, 190, 190,0.04) 17%,transparent 17%, transparent 100%),radial-gradient(circle at 73% 2%, rgba(78, 78, 78,0.04) 0%, rgba(78, 78, 78,0.04) 94%,transparent 94%, transparent 100%),radial-gradient(circle at 45% 2%, rgba(18, 18, 18,0.04) 0%, rgba(18, 18, 18,0.04) 55%,transparent 55%, transparent 100%),radial-gradient(circle at 76% 60%, rgba(110, 110, 110,0.04) 0%, rgba(110, 110, 110,0.04) 34%,transparent 34%, transparent 100%),radial-gradient(circle at 68% 56%, rgba(246, 246, 246,0.04) 0%, rgba(246, 246, 246,0.04) 16%,transparent 16%, transparent 100%),radial-gradient(circle at 71% 42%, rgba(156, 156, 156,0.04) 0%, rgba(156, 156, 156,0.04) 47%,transparent 47%, transparent 100%),radial-gradient(circle at 46% 82%, rgba(247, 247, 247,0.04) 0%, rgba(247, 247, 247,0.04) 39%,transparent 39%, transparent 100%),radial-gradient(circle at 50% 47%, rgba(209, 209, 209,0.04) 0%, rgba(209, 209, 209,0.04) 45%,transparent 45%, transparent 100%),linear-gradient(90deg, rgb(84, 36, 210),rgb(44, 27, 154));
background-size: cover;
background-repeat: no-repeat;
margin: 0 0 0 0;
width: 100%;
height: 95vh;
position: relative;
}
.top_header_texts {
display: block;
margin: 0 auto;
color: White;
font-weight: bold;
font-size: 60px;
position: absolute;
top:50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 100%;
background-color: red;
}
जैसा कि आप देख सकते हैं कि बाईं ओर थोड़ा सा अंतर है लेकिन दाईं ओर कुछ भी नहीं है, यह मुझे परेशान करने के अलावा कुछ भी बड़ा नहीं है और इसे हल करने के लिए कुछ भी नहीं मिला
4 जवाब
मान लें कि आप बूटस्ट्रैप के नवीनतम संस्करण का उपयोग कर रहे हैं। (४.१.१)
.container-fluid
और .col-12
में पैडिंग विशेषताएं हैं, और आप इसे .p-0
वर्ग द्वारा अधिलेखित करने का प्रयास कर सकते हैं
<div class="row container-fluid top_header p-0">
<div class="col-12 container-xl p-0">
<div class="top_header_texts"></div>
</div>
</div>
सामग्री को केंद्र में रखने के लिए .text-center या .mx-auto का उपयोग करें
जैसा कि आप देखते हैं, बस एक text-align: center
समस्या को ठीक करता है:
.top_header {
box-sizing: border-box;
background-image: radial-gradient(circle at 19% 90%, rgba(190, 190, 190,0.04) 0%, rgba(190, 190, 190,0.04) 17%,transparent 17%, transparent 100%),radial-gradient(circle at 73% 2%, rgba(78, 78, 78,0.04) 0%, rgba(78, 78, 78,0.04) 94%,transparent 94%, transparent 100%),radial-gradient(circle at 45% 2%, rgba(18, 18, 18,0.04) 0%, rgba(18, 18, 18,0.04) 55%,transparent 55%, transparent 100%),radial-gradient(circle at 76% 60%, rgba(110, 110, 110,0.04) 0%, rgba(110, 110, 110,0.04) 34%,transparent 34%, transparent 100%),radial-gradient(circle at 68% 56%, rgba(246, 246, 246,0.04) 0%, rgba(246, 246, 246,0.04) 16%,transparent 16%, transparent 100%),radial-gradient(circle at 71% 42%, rgba(156, 156, 156,0.04) 0%, rgba(156, 156, 156,0.04) 47%,transparent 47%, transparent 100%),radial-gradient(circle at 46% 82%, rgba(247, 247, 247,0.04) 0%, rgba(247, 247, 247,0.04) 39%,transparent 39%, transparent 100%),radial-gradient(circle at 50% 47%, rgba(209, 209, 209,0.04) 0%, rgba(209, 209, 209,0.04) 45%,transparent 45%, transparent 100%),linear-gradient(90deg, rgb(84, 36, 210),rgb(44, 27, 154));
background-size: cover;
background-repeat: no-repeat;
margin: 0 0 0 0;
flex: 0 0 100%;
height: 95vh;
position: relative;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.top_header .col-12 {
width: 100%;
}
.top_header_texts {
margin: 0 auto;
color: White;
font-weight: bold;
font-size: 60px;
background-color: red;
text-align: center
}
<div class="row container-fluid top_header">
<div class="col-12 container-xl">
<div class="top_header_texts">text</div>
</div>
</div>
container-fluid
और container-xl
बूटस्ट्रैप की कक्षाएं padding-left:15px
लाती हैं। इसे शून्य पर सेट करने का प्रयास करें।
एचटीएमएल:
<div class="row container-fluid top_header paddingLeft_0">
<div class="col-12 container-xl paddingLeft_0">
<div class="top_header_texts"></div>
</div>
</div>
सीएसएस:
div.paddingLeft_0 {
padding-left:0;
}