मैं हमेशा एक छद्म तत्व को बीच में क्षैतिज रूप से कैसे रखूं? मैंने इसे पूरी तरह से प्रतिशत मान के साथ रखा है, जिसे मैंने समझा था तत्व की चौड़ाई के सापेक्ष था लेकिन विभिन्न स्क्रीन आकारों पर परिपत्र "OR" लगातार बीच में नहीं है ...

निचे देखो:

.content {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    text-align: center;
    margin: 20px;
}

.cc-content {
    width: 50%;
    padding: 5px 20px;
    position: relative;
    background-color: red;
}

.cc-content-1 {
  margin-right: 3px;
}

.cc-content-2 {
  margin-left: 3px;
}

.cc-content-1:after {
    content: 'OR';
    display: inline-block;
    position: absolute;
    vertical-align: middle;
    line-height: 60px;
    top: 20px;
    left: 90%;
    z-index: 1;
    font-size: 21px;
    font-weight: bold;
    border-radius: 100%;
    width: 60px;
    height: 60px;
    background-color: #F2F2F2;
    color: #006AAD;
}
<div class="content">
      <div class="cc-content cc-content-1">
        <h3>Header Here</h3>
        <p>Lorem Ipsuom gshjgshj gshjgsajhusgs gsaiyusgisysgsyigs</p>
      </div>
      <div class="cc-content cc-content-2">
        <h3>Header Here</h3>
        <p>Lorem Ipsuom gshjgshj gshjgsajhusgs gsaiyusgisysgsyigs</p>
      </div>
</div>

यदि आप विंडो का आकार बदलते हैं तो आप देख सकते हैं कि वृत्त केंद्र से थोड़ा हटकर होता है, मैं इसे हमेशा पूर्ण स्थिति के साथ केंद्र में कैसे रखूं? प्रतिशत नहीं है? मैंने फ्लेक्स के साथ खेलने की कोशिश की क्योंकि यह एक फ्लेक्स कंटेनर में है लेकिन ऐसा कुछ भी नहीं लगता है।

मैं किसी स्थिति को निरपेक्ष :after तत्व को क्षैतिज रूप से कैसे केन्द्रित करूं?

0
kawnah 21 जिंदा 2020, 23:18

3 जवाब

सबसे बढ़िया उत्तर

@mgrsskls के समान लेकिन वास्तविक :after तत्व का उपयोग करना। absolute का उपयोग करने के लिए यह एक पुरानी चाल है, फिर left और आधी-चौड़ाई के बराबर नकारात्मक मार्जिन जोड़ें। लेकिन आपके मामले में अतिरिक्त मार्जिन है जिस पर भी विचार करने की आवश्यकता है।

.content {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    text-align: center;
    margin: 20px;
}

.cc-content {
    width: 50%;
    padding: 5px 20px;
    position: relative;
    background-color: red;
}

.cc-content-1 {
  margin-right: 3px;
}

.cc-content-2 {
  margin-left: 3px;
}

.cc-content-1:after {
    content: 'OR';
    display: inline-block;
    position: absolute;
    vertical-align: middle;
    line-height: 60px;
    top: 20px;
    left: 100%;
    margin-left: -27px;
    z-index: 1;
    font-size: 21px;
    font-weight: bold;
    border-radius: 100%;
    width: 60px;
    height: 60px;
    background-color: #F2F2F2;
    color: #006AAD;
}
<div class="content">
      <div class="cc-content cc-content-1">
        <h3>Header Here</h3>
        <p>Lorem Ipsuom gshjgshj gshjgsajhusgs gsaiyusgisysgsyigs</p>
      </div>
      <div class="cc-content cc-content-2">
        <h3>Header Here</h3>
        <p>Lorem Ipsuom gshjgshj gshjgsajhusgs gsaiyusgisysgsyigs</p>
      </div>
</div>
2
Aivaras 22 जिंदा 2020, 00:00

सबसे पहले मैं एचटीएमएल में "या" डालूंगा, ताकि स्क्रीन रीडर इसे जोर से सही ढंग से पढ़ सकें। फिर आप उस तत्व को पूरे कंटेनर के सापेक्ष, हाँ प्रतिशत के साथ रख सकते हैं। आप इसे left: 50% के साथ बिल्कुल बीच में ले जाते हैं और फिर इसकी आधी चौड़ाई से बाईं ओर transform: translateX(-50%) के साथ (इस तरह आपको यह जानने की जरूरत नहीं है कि "या" तत्व कितना चौड़ा है)।

.content {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    text-align: center;
    margin: 20px;
    position: relative;
}

.cc-content {
    width: 50%;
    padding: 5px 20px;
    position: relative;
    background-color: red;
}

.cc-content-1 {
  margin-right: 3px;
}

.cc-content-2 {
  margin-left: 3px;
}

.or {
    display: inline-block;
    position: absolute;
    vertical-align: middle;
    line-height: 60px;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    font-size: 21px;
    font-weight: bold;
    border-radius: 100%;
    width: 60px;
    height: 60px;
    background-color: #F2F2F2;
    color: #006AAD;
    text-transform: uppercase;
}
<div class="content">
      <div class="cc-content cc-content-1">
        <h3>Header Here</h3>
        <p>Lorem Ipsuom gshjgshj gshjgsajhusgs gsaiyusgisysgsyigs</p>
      </div>
      <div class="or">or</div>
      <div class="cc-content cc-content-2">
        <h3>Header Here</h3>
        <p>Lorem Ipsuom gshjgshj gshjgsajhusgs gsaiyusgisysgsyigs</p>
      </div>
</div>
1
mgrsskls 21 जिंदा 2020, 23:33

left: 90% के बजाय, आप left: calc(100% - 30px) कर सकते हैं।

30px छद्म तत्व की आधी चौड़ाई है।

0
Daniel Shamburger 21 जिंदा 2020, 23:32
मुझे लगता है कि प्रत्येक div पर 3px के मार्जिन के लिए खाते में 33px होना चाहिए।
 – 
Rob Moll
21 जिंदा 2020, 23:46