केंद्र प्रपत्र सबमिट बटन एचटीएमएल/सीएसएस

मुझे सीएसएस में मेरे एचटीएमएल फॉर्म जमा करने के लिए परेशानी हो रही है।केंद्र प्रपत्र सबमिट बटन एचटीएमएल/सीएसएस

अभी मैं

<input value="Search" title="Search" type="submit" id="btn_s"> 
    <input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i">

उपयोग कर रहा हूँ इस सीएसएस

#btn_s{ 
    width:100px; 
    margin-left:auto; 
    margin-right:auto; 
} 

#btn_i { 
    width:125px; 
    margin-left:auto; 
    margin-right:auto; 
}

और यह कुछ भी नहीं कर रहा है, मुझे पता है मैं शायद कुछ बेवकूफ गलत कर रहा हूँ, के साथ किसी ने मुझे मदद कर सकता है बाहर?

धन्यवाद

स्रोत

2010-11-19 Belgin Fish

101

http://jsfiddle.net/SebastianPataneMasuelli/rJxQC/

मैं सिर्फ उनके आसपास एक div लपेटा जाता है और यह केंद्र संरेखित कर दिया। तो आपको उन्हें केन्द्रित करने के लिए बटन पर किसी भी सीएसएस की आवश्यकता नहीं है।

<div class="buttonHolder"> 
    <input value="Search" title="Search" type="submit" id="btn_s"> 
    <input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i"> 
</div> 

.buttonHolder{ text-align: center; }

स्रोत

2010-11-19 01:14:59

वास्तव में, इस समाधान का नकारात्मक पक्ष यह है कि धारक div केन्द्रों * सब कुछ * है उस में , जिसमें टेक्स्ट और बच्चों और बच्चों के बच्चे शामिल हैं ... इसलिए आमतौर पर एकल तत्वों पर 'मार्जिन: 0 ऑटो' का उपयोग करना बेहतर होता है, जब हम पूरे कंटेनर को केंद्रित नहीं करना चाहते हैं - और, जैसा कि बताया गया है, आप इसे प्राप्त कर सकते हैं ब्लॉक तत्वों। फिर भी, कभी-कभी मैं इस तरह केंद्रित केंद्र का उपयोग करता हूं, इसलिए यह मेरे लिए है, क्योंकि आप गलत नहीं हैं ... – vaxquis

जब मैंने इसे सीएसएस स्टाइल बटन लिंक के लिए उपयोग किया तो मेरे लिए पूरी तरह से काम करता है। Div और class के साथ लपेटें और इसे विभिन्न वर्गों को प्रभावित किए बिना पूरी तरह से काम करना चाहिए। – masmrdrr

आपको बहुत धन्यवाद, सरल लेकिन एक आकर्षण की तरह काम करता है। –

इस प्रयास करें:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<head> 
    <style type="text/css"> 
     #btn_s{ 
      width:100px; 
     } 

     #btn_i { 
      width:125px; 
     } 
     #formbox { 
      width:400px; 
      margin:auto 0; 
      text-align: center; 
     } 
    </style> 
</head> 
<body> 
    <form method="post" action=""> 
     <div id="formbox"> 
      <input value="Search" title="Search" type="submit" id="btn_s"> 
      <input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i"> 
     </div> 
    </form> 
</body>

2 उदाहरण है, तो आप एक है कि अपनी स्थिति में सबसे अच्छा फिट बैठता है का उपयोग कर सकते हैं।

पैरेंट कंटेनर पर text-align:center का उपयोग करें, या इसके लिए एक कंटेनर बनाएं।
यदि कंटेनर के पास निश्चित आकार होना है, तो auto का उपयोग बाएं और दाएं मार्जिन को मूल कंटेनर में केंद्रित करने के लिए करें।

ध्यान दें कि auto छोड़ दिया और सही करने के लिए खाली जगह distrubuting द्वारा माता-पिता अंतरिक्ष में उन्हें केंद्र के लिए एक ब्लॉक के साथ किया जाता है।

स्रोत

2010-11-19 01:19:31 SuperDuck

इनपुट तत्व डिफ़ॉल्ट रूप से इनलाइन हैं। मार्जिन लागू करने के लिए display:block जोड़ें। हालांकि, यह बटन को दो अलग-अलग लाइनों पर तोड़ देगा। के साथ text-align: center के साथ एक रैपिंग का उपयोग करें जैसा कि अन्य लोगों ने उन्हें एक ही पंक्ति में प्राप्त करने के लिए सुझाव दिया है।

स्रोत

2010-11-19 01:31:28 Tom

मुझे लगता है कि बटन एक ही पंक्ति पर एक दूसरे के बगल में होने चाहिए, उन्हें प्रत्येक को 'ऑटो' मार्जिन का उपयोग करके केंद्रित नहीं किया जाना चाहिए, लेकिन परिभाषित चौड़ाई वाले एक div के अंदर रखा जाना चाहिए जिसमें मार्जिन है '0 ऑटो':

सीएसएस:

#centerbuttons{ 
    width:250px; 
    margin:0 auto; 
}

एचटीएमएल (अपने बटन 'सीएसएस से मार्जिन गुण निकालने के बाद):

<div id="centerbuttons"> 
    <input value="Search" title="Search" type="submit"> 
    <input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit"> 
</div>

स्रोत

2010-11-19 01:33:09 Annie

<style> 
form div { 
    width: 400px; 
    border: 1px solid black; 
} 

form input[type='submit'] { 
    display: inline-block; 
    width: 70px; 
} 

div.submitWrapper { 
    text-align: center;  
}  
</style> 
<form> 

<div class='submitWrapper'>  
<input type='submit' name='submit' value='Submit'> 
</div>

इसके अलावा चेक इस jsfiddle

स्रोत

2014-02-17 23:16:55 kta

मैं यहाँ कुछ जवाब देख, उनमें से ज्यादातर जटिल या कुछ विपक्ष के साथ (: इनलाइन-ब्लॉक अतिरिक्त divs, पाठ के अनुरूप प्रदर्शन की वजह से काम नहीं करता है)।मुझे लगता है कि यह सबसे आसान और समस्या से मुक्त समाधान है:

HTML:

<table> 
    <!-- Rows --> 
    <tr> 
     <td>E-MAIL</td> 
     <td><input name="email" type="email" /></td> 
    </tr> 
    <tr> 
     <td></td> 
     <td><input type="submit" value="Register!" /></td> 
    </tr> 
</table>

सीएसएस:

table input[type="submit"] { 
    display: block; 
    margin: 0 auto; 
}

स्रोत

2017-04-19 16:43:39

बिल्कुल आपसे सहमत हैं, यह सबसे अच्छा समाधान है, धन्यवाद! +1 – stepik21

केंद्र प्रपत्र सबमिट बटन एचटीएमएल/सीएसएस

उत्तर

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