इसे लेबल करने के लिए HTML रेडियो बटन को लंबवत रूप से कैसे संरेखित करें?

Question

मेरे पास रेडियो बटन के साथ एक फॉर्म है जो उनके लेबल के समान लाइन पर हैं। हालाँकि, रेडियो बटन उनके लेबल के साथ लंबवत रूप से संरेखित नहीं हैं जैसा कि नीचे स्क्रीनशॉट में दिखाया गया है।

मैं उनके लेबल के साथ रेडियो बटन को कैसे लंबवत संरेखित कर सकता हूं?

संपादित करें:

यहाँ HTML कोड है:

<input checked="checked" type="radio" name="user_level" id="rd1" value="1"/>
<label for="rd1">radio 1</label><br/>
<input type="radio" name="user_level" id="rd2" value="2"/>
<label for="rd2">radio 2</label><br/>
<input type="radio" name="user_level" id="rd3" value="3"/>
<label for="rd3">radio 3</label><br/>

और सीएसएस कोड:

label{
    padding:5px;
    color:#222;
    font-family:corbel,sans-serif;
    font-size: 14px;
    margin: 10px;
}

Comments

इस समय आपका कोड कैसा दिखता है?

— जॉर्ज

@ninjacoder कोड के साथ अपने प्रश्न को अपडेट करें।

— मुथु कुमारन

Answer 1

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

input[type="radio"] {
  margin-top: -1px;
  vertical-align: middle;
}

Comments

यह मेरे लिए काम कर रहा था लेकिन मुझे जोड़ना था height= 100%;क्योंकि मेरे मूल तत्व ने स्पष्ट रूप से ऊंचाई निर्धारित नहीं की थी।

— DaKaZ

यह मुझे क्रोम, फ़ायरफ़ॉक्स, या IE का उपयोग करते हुए मैक, विंडोज और लिनक्स के बीच सबसे सुसंगत दृष्टिकोण देने के लिए लग रहा था। इसके अलावा, मैंने देखा कि अगर मैं अपने लेबल पर पैडिंग देता हूं और लेबल के अंदर रेडियो डालता हूं, तो मुझे मार्जिन-टॉप को -1px से कम मूल्य पर सेट करने की आवश्यकता हो सकती है (जैसे -3 पीएक्स) मैं कितना पैडिंग का उपयोग कर रहा था, इसके आधार पर वह लेबल। (मैं अपने रेडियो बॉक्स लेबल को एक हॉवर रंग और गोल बॉर्डर प्रभाव देना चाहता हूं ताकि उन्हें कूलर लग सके।)

— Volomike

यह समझाने के लिए कि यह एकमात्र सही उत्तर क्यों है: HTML में कुछ तत्वों में डिफ़ॉल्ट मार्जिन या पैडिंग मान हैं, जैसे <p> या <li> तत्व या रेडियो बटन। आप इसे देख सकते हैं यदि आप डेवलपर मोड (F12) में जाते हैं और अपने माउस को टैग पर रखते हैं। वास्तव में, यह एक अच्छा व्यवहार है, क्योंकि ब्राउज़र स्वयं पूर्वनिर्धारित तत्वों को स्थिति में लाने के लिए सीएसएस का उपयोग करता है जिसे उपयोगकर्ता फिर से रीसेट कर सकता है। लेकिन यह भ्रामक हो सकता है यदि आपको नहीं पता कि पहले स्थान पर कुछ गलत क्यों है। इसलिए हमेशा सेटिंग्स को अधिलेखित करने का प्रयास करें जो आपने सेट नहीं किया था, अगर यह डिफ़ॉल्ट रूप से अजीब लगता है।

— स्टैन्ये

जब आप फ़ॉन्ट आकार को बढ़ाते या घटाते हैं तो यह काम नहीं करता है। कृपया मुझे एक काम के उदाहरण के साथ गलत साबित करें, हालांकि!

— रक्षक एक

Answer 2

input {
    display: table-cell;
    vertical-align: middle
}

सभी रेडियो के लिए क्लास लगाएं। यह html पेज पर सभी रेडियो बटन के लिए काम करेगा।

बेला

Comments

यह अब तक का सबसे अच्छा समाधान है जिसके लिए मैंने यह देखा है। रेडियो बटन लेबल संरेखण ने मुझे वर्षों तक इसके लिए त्रस्त किया है। हर बार मेरे लिए काम करता है।

— जी-मैन

ध्यान दें कि यह तब टूटता है जब लेबल में पाठ की कई पंक्तियाँ होती हैं।

— Daan

Answer 3

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

input[type='radio'], label{   
    vertical-align: baseline;
    padding: 10px;
    margin: 10px;
 }

उन सभी के लिए धन्यवाद जिन्होंने उत्तर दिया, आपका उत्तर किसी का ध्यान नहीं गया। यदि आपको अभी भी कोई अन्य विचार आया है तो इस सवाल का जवाब देने के लिए स्वतंत्र महसूस करें।

Answer 4

vertical-align:topसीएसएस में जोड़ने का प्रयास करें

label{
    padding:5px;
    color:#222;
    font-family:corbel,sans-serif;
    font-size: 14px;
    margin: 10px;
    vertical-align:top;
}​

टेस्ट: http://jsfiddle.net/muthkum/heAWP/

Comments

जब आप फ़ॉन्ट-आकार बढ़ाते या घटाते हैं तो यह पकड़ में नहीं आता है।

— रक्षक एक

@Protectorone यह एक पुराना उत्तर है और ओपी प्रश्न के लिए विशिष्ट है। यदि आप भी ऐसा ही करने की कोशिश कर रहे हैं font-sizeतो प्रयोग करके देखें display:flex। यहाँ एक डेमो, jsfiddle.net/et8z47q5

— मुथु कुमारन

Answer 5

साथ ही उत्तरों में थोड़ा सा फ्लेक्स जोड़ सकते हैं।

.Radio {
  display: inline-flex;
  align-items: center;
}

.Radio--large {
  font-size: 2rem;
}

.Radio-Input {
  margin: 0 0.5rem 0;
}

<div>
  <label class="Radio" for="sex-female">
    <input class="Radio-Input" type="radio" id="sex-female" name="sex" value="female" />
    Female
  </label>

  <label class="Radio" for="sex-male">
    <input class="Radio-Input" type="radio" id="sex-male" name="sex" value="male" />
    Male
  </label>
</div>


<div>
  <label class="Radio Radio--large" for="sex-female2">
    <input class="Radio-Input" type="radio" id="sex-female2" name="sex" value="female" />
    Female
  </label>

  <label class="Radio Radio--large" for="sex-male2">
    <input class="Radio-Input" type="radio" id="sex-male2" name="sex" value="male" />
    Male
  </label>
</div>

Answer 6

आप इस तरह कर सकते हैं:

input {
    vertical-align:middle;
}

label{
    color:#222;
    font-family:corbel,sans-serif;
    font-size: 14px;
}

डेमो

Comments

बहुत अच्छा। मैं लेबल के बजाय बटन को संरेखित करना चाहता था, और यह चाल करता है।

— posfan12

Answer 7

कुछ इस तरह से काम करना चाहिए

सीएसएस:

input {
    float: left;
    clear: left;
    width: 50px;
    line-height: 20px;
}

label {
    float: left;
    vertical-align: middle;
}

Answer 8

label, input {
    vertical-align: middle;
}

मैं सिर्फ मूल बॉक्स के आधार रेखा के साथ बक्से के ऊर्ध्वाधर मध्य बिंदु को संरेखित कर रहा हूं और साथ ही माता-पिता की आधी एक्स-ऊंचाई (en.wikipedia.org/wiki/X-height)।

Answer 9

इनमें से बहुत सारे उत्तर उपयोग करने के लिए कहते हैं vertical-align: middle;, जो संरेखण को बंद कर देता है, लेकिन मेरे लिए यह अभी भी कुछ पिक्सेल द्वारा बंद है। विधि है कि मैं लेबल और रेडियो आदानों के बीच सच 1 से 1 संरेखण प्राप्त करने के लिए यह है vertical-align: top;:

label, label>input{
    font-size: 20px;
    display: inline-block;
    margin: 0;
    line-height: 28px;
    height: 28px;
    vertical-align: top;
}

<h1>How are you?</h1>
<fieldset>
	<legend>Your response:</legend>
	<label for="radChoiceGood">
		<input type="radio" id="radChoiceGood" name="radChoices" value="Good">Good
	</label>
	
	<label for="radChoiceExcellent">
		<input type="radio" id="radChoiceExcellent" name="radChoices" value="Excellent">Excellent
	</label>
	
	<label for="radChoiceOk">
		<input type="radio" id="radChoiceOk" name="radChoices" value="OK">OK
	</label>
</fieldset>

Answer 10

मुझे लेबल के अंदर इनपुट्स डालना पसंद है (अतिरिक्त बोनस: अब आपको forलेबल पर विशेषता की आवश्यकता नहीं है ), और vertical-align: middleइनपुट पर डालें ।

label > input[type=radio] {
    vertical-align: middle;
    margin-top: -2px;
}

#d2 {  
    font-size: 30px;
}

<div>
	<label><input type="radio" name="radio" value="1">Good</label>
	<label><input type="radio" name="radio" value="2">Excellent</label>
<div>
<br>
<div id="d2">
	<label><input type="radio" name="radio2" value="1">Good</label>
	<label><input type="radio" name="radio2" value="2">Excellent</label>
<div>

( -2px margin-topस्वाद का मामला है।)

एक अन्य विकल्प जो मुझे वास्तव में पसंद है वह एक तालिका का उपयोग कर रहा है। (अपने पिच कांटे पकड़ो! यह वास्तव में अच्छा है!) इसका मतलब है कि आप को जोड़ने की जरूरत हैfor अपने सभी लेबल के विशेषता और idअपने इनपुट के लिए है। मैंने कई लाइनों पर लंबे पाठ सामग्री वाले लेबल के लिए इस विकल्प की सिफारिश की है।

<table><tr><td>
    <input id="radioOption" name="radioOption" type="radio" />
    </td><td>
    <label for="radioOption">                     
        Really good option
    </label>
</td></tr></table>

Answer 11

हालांकि मैं मानता हूं कि टेबल का इस्तेमाल डिज़ाइन मान्यताओं के लिए नहीं किया जाना चाहिए, लेकिन वे आम धारणा के विपरीत हैं जो वे सत्यापन करते हैं। यानी टेबल का टैग नहीं निकाला जाता है। रेडियो बटन संरेखित करने का सबसे अच्छा तरीका इनपुट तत्वों पर समायोजित मार्जिन के साथ ऊर्ध्वाधर संरेखित मध्य सीएसएस का उपयोग करना है।

Answer 12

display:inline-blockलेबलों को जोड़ना और उन्हें padding-topदेना यह तय करेगा, मुझे लगता है। इसके अलावा, केवल line-heightलेबल पर सेटिंग भी होगी।

Answer 13

वहाँ कई तरीके हैं, एक मैं पसंद करेंगे html में एक तालिका का उपयोग कर रहा है। आप दो coloum तीन पंक्तियों की तालिका जोड़ सकते हैं और रेडियो बटन और lable रख सकते हैं।

<table border="0">

<tr>
  <td><input type="radio" name="sex" value="1"></td>
  <td>radio1</td>

</tr>
<tr>
  <td><input type="radio" name="sex" value="2"></td>
  <td>radio2</td>

</tr>
</table>

Comments

कृपया लेआउट उद्देश्यों के लिए तालिकाओं का उपयोग न करें।

— PeeHaa

-1 तालिकाओं को लेआउट के लिए उपयोग नहीं किया जाना चाहिए और यह कोड सत्यापन पास नहीं करेगा ... @njacjacoder, आपने इसे "उत्तर" के रूप में क्यों चुना?

— tereško

वास्तव में .. गंभीरता से .. हर बार जब कोई फॉर्म मार्कअप के लिए तालिकाओं का उपयोग करना सिखाता है, तो दुनिया में कहीं एक प्यारा बिल्ली का बच्चा मर जाता है ..

— डेमियन ओवरिम

@PeeHaa, tereško, डेमियन ओवरिम मुझे लगता है कि आप लोग शायद सही हैं, मैं अपने स्वयं के समाधान के साथ आने में सक्षम हूं, जिसे मैंने यहां नीचे पोस्ट किया है। धन्यवाद दोस्तों! आपकी मदद और सलाह की बहुत सराहना की जाती है।

— ninjacoder

मैंने अन्य विकल्पों की कोशिश की है और वे बहुत अच्छे नहीं थे। टेबल्स का काम। .tablecell{dispay:table-cell;} ... <div class="tablecell">ऐसा लगता है कि लोग जो टेबल का उपयोग कर रहे हैं उन्हें स्वीकार नहीं करना चाहते हैं के लिए एक