"यदि कोई कर्मचारी अपना काम अच्छी तरह से करना चाहता है, तो उसे पहले अपने औजारों को तेज करना होगा।" - कन्फ्यूशियस, "द एनालेक्ट्स ऑफ कन्फ्यूशियस। लू लिंगगोंग"
मुखपृष्ठ > प्रोग्रामिंग > ए के अंदर लंबवत रूप से कैसे संरेखित करें?

ए के अंदर लंबवत रूप से कैसे संरेखित करें?

2024-11-09 को प्रकाशित
ब्राउज़ करें:362

How to Vertically Align a  Inside a ?

एक को एक

के भीतर लंबवत रूप से संरेखित करना

निम्न स्थिति पर विचार करें: आपके पास एक एक , जैसा कि इस कोड में देखा गया है:

<div 
  id="theMainDiv"
  style="
    border:solid 1px gray;
    cursor:text;
    width:400px;
    padding:0px;"
>
  <span 
    id="tag1_outer" 
    style="
      background:#e2e6f0;
      padding-right:4px;
      padding-left:4px;
      border:solid 1px #9daccc;
      font:normal 11px arial;
      color:#3c3c3c"
  >as</span>
</div>

डिफ़ॉल्ट रूप से,

के निचले-बाएँ कोने में संरेखित होगा। को
के भीतर लंबवत रूप से केन्द्रित करने के लिए, निम्नलिखित तरीकों पर विचार करें:

विकल्प 1: लाइन-ऊंचाई हेरफेर

की लाइन-ऊंचाई सेट करें बच्चा

की ऊंचाई के बराबर होगा।
#theMainDiv {
  height: 20px; /* Set the div height for reference */
}

#tag1_outer {
  line-height: 20px;
}

विकल्प 2: पूर्ण स्थिति निर्धारण

कंटेनर पर पूर्ण स्थिति लागू करें। फिर, बच्चे को बिल्कुल शीर्ष:50% पर रखें और मार्जिन-टॉप:-YYYpx का उपयोग करें, जहां YYY बच्चे की ज्ञात ऊंचाई का आधा प्रतिनिधित्व करता है।
#theMainDiv {
  position: relative; /* Apply relative positioning to the div */
}

#tag1_outer {
  position: absolute;
  top: 50%;
  margin-top: -10px; /* Half the height of the child span */
}

अधिक विवरण और अतिरिक्त तकनीकों के लिए ऊर्ध्वाधर संरेखण को समझने पर दिए गए लेख को देखें।

नवीनतम ट्यूटोरियल अधिक>

चीनी भाषा का अध्ययन करें

अस्वीकरण: उपलब्ध कराए गए सभी संसाधन आंशिक रूप से इंटरनेट से हैं। यदि आपके कॉपीराइट या अन्य अधिकारों और हितों का कोई उल्लंघन होता है, तो कृपया विस्तृत कारण बताएं और कॉपीराइट या अधिकारों और हितों का प्रमाण प्रदान करें और फिर इसे ईमेल पर भेजें: [email protected] हम इसे आपके लिए यथाशीघ्र संभालेंगे।

Copyright© 2022 湘ICP备2022001581号-3