सीएसएस: एक "div" के अंदर लंबवत "लेबल" और "इनपुट" कैसे संरेखित करें?

Question

निम्नलिखित कोड पर विचार करें :

HTML:

<div>
    <label for='name'>Name:</label>
    <input type='text' id='name' />
</div>

सीएसएस:

div {
    height: 50px;
    border: 1px solid blue;
}

((लंबवत) बीच में labelऔर सबसे आसान तरीका क्या होगा ?inputdiv

Comments

मेरी जानकारी के लिए, नीचे की रेखा "आप नहीं" हो सकती है, और इसके आस-पास का सबसे आसान तरीका एक सरल का उपयोग करना <table>और valign='middle'इसके <td>s पर लागू होना है ।

— बेमेर्ग्यू

Answer 1

div {
    display: table-cell;
    vertical-align: middle;
    height: 50px;
    border: 1px solid red;
}

<div>
    <label for='name'>Name:</label>
    <input type='text' id='name' />
</div>

इस पद्धति के फायदे यह है कि आप ऊँचाई को बदल सकते हैं div, पाठ क्षेत्र की ऊँचाई को बदल सकते हैं और फ़ॉन्ट का आकार बदल सकते हैं और सब कुछ हमेशा बीच में रहेगा।

http://jsfiddle.net/53ALd/6/

Comments

सुरुचिपूर्ण लग रहा है :) क्या किसी को पता है कि ब्राउज़र इस विधि को कैसे संगत करता है?

— ज़ावेन नाहपत्तन

IE के लिए, मुझे लगता है कि यह केवल IE8 या बेहतर पर काम करता है। अन्य वेब ब्राउज़र के लिए यह ठीक है।

— मार्क-फ्रांस्वा

मुझे इसके बारे में पता नहीं था display: table-cell। क्या यह कुछ ब्राउज़रों पर समर्थित है?

— बेमेर्ज्यू

@ मीशा आपको इस तथ्य को निर्दिष्ट करना चाहिए कि आपके इनपुट / लेबल बिल्कुल तैनात थे। यह सवाल की परिस्थितियों को पूरी तरह से बदल देता है। मैं मार्क को +1 दे रहा हूं। बहुत बढ़िया जवाब।

— जेसगैविन

मुझे पूरा यकीन है कि बिंदु जेंसन बनाने की कोशिश कर रहा था (और इसकी अभिव्यक्ति होनी चाहिए) यह है कि display: table-cellडिव का उपयोग उन तरीकों से व्यवहार करने के लिए किया जाता है जिनसे उन्हें व्यवहार करने की उम्मीद नहीं है, जैसे कि बाद में एक ही लाइन / आदि पर रेंडर करना।

— तसव्विन

Answer 2

अधिक आधुनिक दृष्टिकोण सीएसएस फ्लेक्स-बॉक्स का उपयोग करना होगा।

div {
  height: 50px;
  background: grey;
  display: flex;
  align-items: center
}

<div>
  <label for='name'>Name:</label>
  <input type='text' id='name' />
</div>

एक और अधिक जटिल उदाहरण ... यदि आपके पास फ्लेक्स प्रवाह में बहुउपयोगी तत्व हैं, तो आप निर्दिष्ट तत्वों के लिए अलग-अलग एकल तत्वों को संरेखित करने के लिए संरेखण-स्व का उपयोग कर सकते हैं ...

div {
  display: flex;
  align-items: center
}

* {
  margin: 10px
}

label {
  align-self: flex-start
}

<div>
  <img src="https://de.gravatar.com/userimage/95932142/195b7f5651ad2d4662c3c0e0dccd003b.png?size=50" />
  <label>Text</label>
  <input placeholder="Text" type="text" />
</div>

यह भी क्षैतिज और लंबवत केंद्र के लिए सुपर आसान है:

div {
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background: grey;
  display: flex;
  align-items: center;
  justify-content:center
}

<div>
  <label for='name'>Name:</label>
  <input type='text' id='name' />
</div>

Comments

काश, यह तब काम करेगा जब लेबल में कोई चित्र और पाठ लिपटा हो। मेरे पास पाठ के बाद एक छोटा आइकन है, लेकिन पाठ हिलता नहीं है।

— केविन स्कर्नरहस्ट

यह काम करता है अगर लेबल और पाठ अलग-अलग तत्व हैं, या यदि आपका लॉब एक ​​फ्लेक्सबॉक्स भी बनाता है ...

— होल्गर विल

display:flexकम संगतता है, क्रोम

Answer 3

यह क्रॉस-ब्राउज़र काम करता है, अधिक पहुंच प्रदान करता है और कम मार्कअप के साथ आता है। खाई खोदो। लेबल लपेटें

label{
     display: block; 
     height: 35px; 
     line-height: 35px; 
     border: 1px solid #000; 
}

input{margin-top:15px; height:20px}

<label for="name">Name: <input type="text" id="name" /></label>

Comments

यह स्पष्ट रूप से दो लाइन लेबल के लिए काम नहीं करेगा। और यदि आप सुनिश्चित हैं कि लेबल हमेशा एक पंक्ति है, तो लाखों अन्य विकल्प हैं।

— लसह

प्रश्न एकल लाइन लेबल के संबंध में था, और मैंने उसी के अनुसार उत्तर दिया। यहाँ पर आपकी बात (इरादों) या इरादों के बारे में निश्चित नहीं है, लेकिन अगर x इतना स्पष्ट है तो आपको इसके एक लाख उदाहरण बनाने चाहिए। बहुत कम से कम तो आप मेरे जवाब के तहत निराशा कर सकते हैं और अपनी मिलियन जीत की शक्ति को महसूस कर सकते हैं। वाहवाही।

— अल्बर्ट

यह सिंगल लाइन लेबल के लिए सबसे अच्छा जवाब है। विनिर्देश कहते हैं: "यदि विशेषता के लिए निर्दिष्ट नहीं है, लेकिन लेबल तत्व में एक लेबल करने योग्य प्रपत्र-संबद्ध तत्व वंशज है, तो ट्री ऑर्डर में पहला ऐसा वंश लेबल तत्व का लेबल नियंत्रण है।" इसलिए यह एकमात्र तरीका है जहां आप forऔर छोड़ सकते हैंid अधिकतम सादगी के लिए विशेषताओं ।

— संसद

Answer 4

मुझे पता है कि यह सवाल दो साल पहले पूछा गया था, लेकिन किसी भी हाल के दर्शकों के लिए, यहां एक वैकल्पिक समाधान है, जिसमें मार्क-फ्रांस्वा के समाधान पर कुछ फायदे हैं:

div {
    height: 50px;
    border: 1px solid blue;
    line-height: 50px;
}

यहाँ हम केवल line-heightdiv की ऊँचाई के बराबर जोड़ते हैं । लाभ यह है कि अब आप div की प्रदर्शन संपत्ति को बदल सकते हैं जैसा कि आप फिट देखते हैं, inline-blockउदाहरण के लिए, और यह सामग्री लंबवत केंद्रित रहेगी। स्वीकृत समाधान के लिए आपको div को एक तालिका सेल के रूप में व्यवहार करने की आवश्यकता होती है। यह पूरी तरह से काम करना चाहिए, क्रॉस-ब्राउज़र।

केवल अन्य लाभ यह दो के बजाय सिर्फ एक और CSS नियम है :)

चीयर्स!

Answer 5

उपयोग paddingपर div( ऊपर और नीचे ) और vertical-align:middleपर labelऔरinput ।

http://jsfiddle.net/VLFeV/1/ पर उदाहरण

Comments

यह jsfiddle पर काम नहीं करता है। मैंने की ऊंचाई बदल दी divऔर अंदर की सामग्री बिल्कुल भी नहीं खिसकी। क्या मैं कुछ भूल रहा हूँ?

— बेमेर्ज्यू

मेरी राय में, लेआउट में पिक्सेल ऊँचाई तय नहीं होनी चाहिए ... लेआउट को सामग्री के चारों ओर तेज़ी से प्रवाहित होना चाहिए। हालाँकि, मैं एक दिन और समय से आता हूँ जब ब्राउज़र ज़ूम इन और आउट होने पर टेक्स्ट साइज़ को छोटा कर देते हैं। हाल के ब्राउज़र वास्तव में पूरे पृष्ठ को मापते हैं, इसलिए पिक्सेल हाइट्स सेट करना थोड़ा बेहतर काम करता है। हालाँकि, पिक्सेल ऊँचाई सेट करने से बचने के लिए पूरे नए कारण हैं ... उदाहरण के लिए, उत्तरदायी लेआउट तकनीक। इसलिए यह मेरा पसंदीदा तरीका होगा।

— थर्ड जेंडर

Answer 6

परिभाषित ऊंचाई के साथ एक और div में लेबल और इनपुट लपेटें। यह 8 से कम IE संस्करणों में काम नहीं कर सकता है।

position:absolute; 
top:0; bottom:0; left:0; right:0;
margin:auto;

Answer 7

आप display: table-cellनिम्न कोड में संपत्ति का उपयोग कर सकते हैं :

div {
     height: 100%;
     display: table-cell; 
     vertical-align: middle;
    }