मैं एक लेबल और एक textarea कैसे संरेखित करूं?

Question

मेरा कोड इस तरह समाप्त होता है:

             XXXXX
             XXXXX
Description: XXXXX

मुझे चाहिए:

             XXXXX
Description: XXXXX
             XXXXX

"विवरण" कभी-कभी कई पंक्तियों का विस्तार करता है।

कोड:

<p class="DataForm">
    <label>Blah blah blah Description:</label>
    <asp:TextBox ID="txtBlahblahblahDescription"
                 runat="server"
                 TextMode="MultiLine"
                 Rows="8"
                 Columns="50"></asp:TextBox><br/>
</p>

सीएसएस:

.DataForm {
}
.DataForm label {
    display: inline-block;
    font-size: small;
    margin-left: 5px;
    width: 5%;
    min-width: 60px;
}
.DataForm input {
    margin-right: 9px;
    display: inline-block;
    width: 21%;
    min-width: 30px;
}

Comments

क्या आप बीच में विवरण लेबल चाहते हैं?

— पीटर स्टिफ़ज़ैंड

क्या आप तालिकाओं का उपयोग कर रहे हैं या यह इनलाइन है, क्या आप लेबल को छोड़ कर तैर रहे हैं, आदि? क्या आप अपना HTML और CSS पोस्ट कर सकते हैं ताकि हम जान सकें कि आपका कोड कैसा दिखता है? उन शैलियों और लेआउटों की अनुशंसा करना कठिन है जो आपके कोड में फिट नहीं हो सकते।

— एंडी ई

हां, यदि संभव हो तो वर्णन लेबल को लंबवत केंद्रित किया जाना चाहिए। । । । मैं अपना कोड

— NibblyPig

Answer 1

आपको उन दोनों को कुछ कंटेनर तत्व में डालना होगा और फिर उस पर संरेखण लागू करना होगा।

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

.formfield * {
  vertical-align: middle;
}

<p class="formfield">
  <label for="textarea">Label for textarea</label>
  <textarea id="textarea" rows="5">Textarea</textarea>
</p>

Comments

हम्म, मैंने अपने पी टैग पर इनलाइन स्टाइल के रूप में डालने की कोशिश की, लेकिन यह काम नहीं किया

— NIBlyPig

क्या यह विरासत में नहीं मिलेगा? मैं इसे वैसे भी कोशिश की, लेकिन यह काम नहीं किया :(

— NIBlyPig 12

मेरा बुरा, यह डेटाफॉर्म * के साथ काम करता है, हालांकि जिस तरह से यह अजीब तरह का है, यह काम करता है, इसलिए धन्यवाद

— NIBlyPig

एक बेहतर समाधान बस vertical-align: middle;अपने प्रत्येक नियम को ऊपर रखना होगा , .DataForm labelऔर .DataForm textarea। * चयनकर्ता के उपयोग से कभी-कभी दुष्प्रभाव हो सकते हैं।

— असंतुष्टगीत

आप सही हो सकते हैं, लेकिन अगर कोई vertical-align: middleकुछ करेगा , तो एक आमतौर पर इसे पूरे ब्लॉक पर लागू करेगा।

— बालुसक

Answer 2

बस textarea को लेबल से लपेटें और textarea स्टाइल को सेट करें

vertical-align: middle;

यहाँ पृष्ठ पर सभी textareas के लिए कुछ जादू है :)

<style>
    label textarea{
        vertical-align: middle;
    }
</style>

<label>Blah blah blah Description: <textarea>dura bura</textarea></label>

Comments

यह पूरी तरह से काम किया। चयनित उत्तर नहीं दिया गया। धन्यवाद!

— eaglei22

Answer 3

1. heightअपने लेबल को heightमल्टीलाइन टेक्स्टबॉक्स के समान सेट करें ।

2. .alignTop{vertical-align: middle;}लेबल नियंत्रण के लिए cssClass जोड़ें ।

   <p>
       <asp:Label ID="DescriptionLabel" runat="server" Text="Description: " Width="70px" Height="200px" CssClass="alignTop"></asp:Label>
       <asp:Textbox id="DescriptionTextbox" runat="server" Width="400px" Height="200px" TextMode="MultiLine"></asp:Textbox>
       <asp:RequiredFieldValidator id="DescriptionRequiredFieldValidator" runat="server" ForeColor="Red"
       ControlToValidate="DescriptionTextbox" ErrorMessage="Description is a required field.">    
   </asp:RequiredFieldValidator>
   

Answer 4

vertical-align:middleअपने सीएसएस में उपयोग करें ।

<table>
    <tr>
       <td style="vertical-align:middle">Description:</td>
       <td><textarea></textarea></td>
    </tr>
</table>

Comments

यदि संभव हो तो मैं टेबल के बिना एक सुरुचिपूर्ण समाधान की तलाश कर रहा हूं।

— NIBlyPig

आपको अपने प्रश्न में ऐसा सामान लिखना चाहिए।

— पीटर स्टुफ़िज़ंड

आजकल फॉर्म के लिए तालिकाओं का उपयोग कौन कर रहा है?

— बालुसक

क्षमा करें, लगा कि यह स्पष्ट है :(

— NIBlyPig

टेबल्स रूपों के लिए पूरी तरह से मान्य हैं। यह है केवल एक ही डेटा पंक्ति (या स्तंभ) के साथ यद्यपि सारणीबद्ध डेटा,।

— असंतुष्टगीत

Answer 5

पाठ क्षेत्र बॉक्स को लेबल पर संरेखित करें, न कि पाठ क्षेत्र पर लेबल के लिए,

label {
    width: 180px;
    display: inline-block;
}

textarea{
    vertical-align: middle;
}

<label for="myfield">Label text</label><textarea id="myfield" rows="5" cols="30"></textarea>

Answer 6

इसे इस्तेमाल करे:

textarea { vertical-align: top; }​ 

Answer 7

अपने td तत्वों पर ऊँचाई सेट करने का प्रयास करें।

vertical-align: middle; 

इसका मतलब यह है कि शैली को जिस तत्व पर लागू किया जाता है उसे मूल तत्व के भीतर संरेखित किया जाएगा। Td की ऊँचाई केवल पाठ के अंदर जितनी ऊँची हो सकती है।