लेबल

में वर्टिकल संरेखण पाठ मुझे फ़ील्ड के लिए लेबल में टेक्स्ट को लंबवत रूप से संरेखित करने के लिए कहा गया है लेकिन मुझे नहीं पता कि वे क्यों नहीं चल रहे हैं। मैंने vertical-align:top; और bottom और middle जैसे अन्य विशेषताओं का उपयोग करके इन-लाइन शैलियों को डालने का प्रयास किया है लेकिन यह काम नहीं करता है।लेबल

कोई भी विचार?

<dd> 
    <label class="<?=$email_confirm_class;?>" 
      style="text-align:right; padding-right:3px">Confirm Email</label> 
    <input class="text" type="text" 
      style="border:none;" name="email_confirm" 
      id="email_confirm" size="18" value="<?=$_POST['email_confirm'];?>" 
      tabindex="4" /> 
    * 
</dd>

स्रोत

2009-10-12 Ian

ऐसा करने के लिए आपको इनपुट की लंबवत-संरेखण संपत्ति को बदलना चाहिए।

<dd><label class="<?=$email_confirm_class;?>" style="text-align:right; padding-right:3px">Confirm Email</label><input class="text" type="text" style="vertical-align: middle; border:none;" name="email_confirm" id="email_confirm" size="18" value="<?=$_POST['email_confirm'];?>" tabindex="4" /> *</dd>

यहां एक और पूर्ण संस्करण है। यह आईई 8 में परीक्षण किया गया है और यह काम करता है। इनपुट से मध्यम:

<html><head></head><body><dl><dt>test</dt><dd><label class="test" style="text-align:right; padding-right:3px">Confirm Email</label><input class="text" type="text" style="vertical-align: middle; font-size: 22px" name="email_confirm" id="email_confirm" size="28" value="test" tabindex="4" /> *</dd></dl></body></html>

स्रोत

2009-10-12 14:39:56

मेरे अनुभव में टेक्स्ट फ़ील्ड काफी कठिन हैं, और लंबवत पैडिंग अधिक विश्वसनीय रूप से काम करता है। – Wabbitseason

'लंबवत-संरेखण' यहां कुछ भी नहीं करता है (आईई 8)। – Joey

मैंने इसे IE8 और FF (ubuntu) में परीक्षण किया है प्रभाव को देखने के लिए लंबवत-संरेखण को हटा दिया है और यह पूरी तरह से काम कर रहा है। मैंने उदाहरण भी अपडेट किया। –

आप line-height की कोशिश की है ऊर्ध्वाधर- align को हटाने के द्वारा अंतर देखते हैं? यदि एकाधिक पंक्ति लेबल हैं तो यह आपकी समस्याओं का समाधान नहीं करेगा, लेकिन यह एक त्वरित समाधान हो सकता है।

स्रोत

2009-10-12 14:40:36 Wabbitseason

धन्यवाद! यह मेरे मामले में काम किया ... – jpsstavares

समय बचाया :) –

यह वही है मैं आमतौर पर लेबल के अंदर करने के लिए "ऊर्ध्वाधर संरेखित" पाठ करना है:

label { 
    display: block; 
    float: left; 
    padding-top: 2px; /*This needs to be modified to fit */ 
}

यह बहुत अच्छी तरह से स्केल नहीं होगा, लेकिन यह काम करता है।

स्रोत

2009-10-12 14:48:23 peirix

vertical-align शैली तालिका कोशिकाओं में उपयोग की जाती है, ताकि यह आपके लिए कुछ भी नहीं करेगी।

इनपुट बॉक्स करने के लिए लेबल संरेखित करने के लिए, आप line-height उपयोग कर सकते हैं:

line-height: 25px;

स्रोत

2009-10-12 14:50:20 Guffa

यह परिवर्तनीय ऊंचाई के लिए काम नहीं करता है। – Rodrigo

खड़ा अलाइनमेंट केवल इनलाइन या इनलाइन-ब्लॉक तत्वों के साथ काम करता है, और यह केवल करने के लिए अन्य इनलाइन [रिश्तेदार है - ब्लॉक] तत्वों। चूंकि आप लेबल को फ़्लोट करते हैं, यह ब्लॉक तत्व बन जाता है।

आपके मामले में सबसे आसान समाधान लेबल को display: inline-block पर सेट करना है और लेबल और इनपुट में vertical-align: middle जोड़ें। (आपको लगता है कि पाठ की ऊंचाई ऐसी है कि ऊर्ध्वाधर संरेखण वैसे भी कोई फर्क नहीं पड़ेगा।)

स्रोत

2009-10-12 15:40:53 DisgruntledGoat

मैं कुछ ऊर्ध्वाधर रेडियो बक्से लेबल जोड़ने की कोशिश कर रहा हूं। मैं यह करने के लिए किया था:

<%: Html.RadioButton("RadioGroup1", "Yes") %><label style="display:inline-block;padding-top:2px;">Yes</label><br /> 
<%: Html.RadioButton("RadioGroup1", "No") %><label style="display:inline-block;padding-top:3px;">No</label><br /> 
<%: Html.RadioButton("RadioGroup1", "Maybe") %><label style="display:inline-block;padding-top:4px;">Maybe</label><br />

यह जहां लेबल रेडियो बटन पर केंद्रित है ठीक से प्रदर्शित करने के लिए, उन्हें हो जाता है, हालांकि मैं प्रत्येक पंक्ति के साथ शीर्ष गद्दी बढ़ाने के लिए, जैसा कि आप देख सकते हैं की थी। कोड सुंदर नहीं है, लेकिन परिणाम है।

स्रोत

2009-12-16 02:57:06

मैं एक ऐसी ही समस्या थी और यह एक div में label लपेटकर और निम्नलिखित शैलियाँ निर्धारित हल:

<div style="display: table; vertical-align: middle"> 
    <label style="display: table-cell;" ... > ... </label> 
</div>

स्रोत

2013-03-26 11:59:48 Pablo

label { 
 
     padding: 10px 0; 
 
     position: relative; 
 
    }

कुछ गद्दी-टॉप और padding-bottom बजाय जोड़ें ऊंचाई की

स्रोत

2017-03-19 19:57:54

शायद वर्तनी करें कि स्टाइल विशेषता कैसा दिखना चाहिए? शायद ओपी नहीं जानता कि आपका क्या मतलब है। – einpoklum

अपने लेबल पर सीएसएस का उपयोग करें।

उदाहरण के लिए:

label {line-height:1em; margin:2px 5px 3px 5px; padding:2px 5px 3px 5px;}

सूचना है कि line-height जबकि मार्जिन हुक्म होगा कितनी दूर अन्य तत्वों बाहर करने के लिए सक्षम बाहर हो जाएगा और गद्दी किसी भी आंतरिक अंतरिक्ष हुक्म होगा, लाइन में ही की ऊंचाई को समायोजित करेगा लेबल के बाहरी किनारे से। इस तरह मार्जिन और गद्दी काम (दक्षिणावर्त: शीर्ष सही नीचे बाएँ) 5px 3px, तो 2px 5px है:

2px शीर्ष 5px सही 3px नीचे 5px वाम

स्रोत

2017-04-21 16:44:28 psiclone

-1

लेबल मिल जाएगा करने के लिए disply:flex संपत्ति जोड़ना काम पूरा हो गया!

स्रोत

2017-09-02 16:31:20

उत्तर

संबंधित मुद्दे