इसलिए, मैं 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;
}

परिणाम: यहां छवि विवरण दर्ज करें

जैसा कि आप देख सकते हैं कि बाईं ओर थोड़ा सा अंतर है लेकिन दाईं ओर कुछ भी नहीं है, यह मुझे परेशान करने के अलावा कुछ भी बड़ा नहीं है और इसे हल करने के लिए कुछ भी नहीं मिला

1
Mahdi 22 मार्च 2020, 09:45

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>

ऑनलाइन सत्यापन

1
rangerz 22 मार्च 2020, 10:24

सामग्री को केंद्र में रखने के लिए .text-center या .mx-auto का उपयोग करें

0
md rabiul islam asa 22 मार्च 2020, 09:52

जैसा कि आप देखते हैं, बस एक 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>
1
Saeed Jamali 22 मार्च 2020, 10:26

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;
}
1
Sudipto Roy 22 मार्च 2020, 10:22