24
के केंद्र में इनपुट बॉक्स बॉक्स मेरे पास एक div है, और मैं इनपुट बॉक्स को इसके केंद्र में रखना चाहता हूं। मैं यह कैसे कर सकता हूँ?div
Q
div
A
उत्तर
11
#the_div input {
margin: 0 auto;
}
मुझे यकीन नहीं है कि यह अच्छा ओएल 'आई 6 में काम करता है, तो आपको इसके बजाय ऐसा करना पड़ सकता है।
/* IE 6 (probably) */
#the_div {
text-align: center;
}
+0
मेरी मदद करने के लिए धन्यवाद। – user156073
+0
बिल्कुल सही! सभी जटिल समाधानों से बेहतर। –
1
#input_box {
margin: 0 auto;
text-align: left;
}
#div {
text-align: center;
}
<div id="div">
<label for="input_box">Input: </label><input type="text" id="input_box" name="input_box" />
</div>
या आप गद्दी का उपयोग कर इसे कर सकता है, लेकिन यह है कि एक विचार के महान नहीं है।
0
इस वेबसाइट को आजमाएं यह आपको दिखाता है कि कैसे एक div और text में चीजों को केंद्रित करना है। Dorward
40
पकड़ यह है कि इनपुट तत्व इनलाइन हैं। हमें इसे केंद्र में रखने से पहले इसे ब्लॉक (डिस्प्ले: ब्लॉक) बनाना होगा: मार्जिन: 0 ऑटो। कृपया कोड नीचे देखें:
<html>
<head>
<style>
div.wrapper {
width: 300px;
height:300px;
border:1px solid black;
}
input[type="text"] {
display: block;
margin : 0 auto;
}
</style>
</head>
<body>
<div class='wrapper'>
<input type='text' name='ok' value='ok'>
</div>
</body>
</html>
लेकिन अगर आप एक div जो स्थिति में है = है निरपेक्ष तो हम चीजों को थोड़ा सा करने के लिए यह देखने differently.Now की जरूरत है!
<html>
<head>
<style>
div.wrapper {
position: absolute;
top : 200px;
left: 300px;
width: 300px;
height:300px;
border:1px solid black;
}
input[type="text"] {
position: relative;
display: block;
margin : 0 auto;
}
</style>
</head>
<body>
<div class='wrapper'>
<input type='text' name='ok' value='ok'>
</div>
</body>
</html>
इस आशा helpful.Thank आप हो सकता है।
+1
"पकड़ यह है कि इनपुट तत्व इनलाइन हैं" - यह कुंजी है! Thansk – oak
0
यहाँ यह करने का एक बल्कि अपरंपरागत तरीका है:
#inputcontainer
{
display:table-cell; //display like a <td> to make the vertical-align work
text-align:center; //centre the input horizontally
vertical-align:middle; //centre the input vertically
width:200px; //widen the div for demo purposes
height:200px; //make the div taller for demo purposes
background:green; //change the background of the div for demo purposes
}
यह सबसे अच्छा तरीका है यह करने के लिए नहीं हो सकता है, और मार्जिन काम नहीं करेगा, लेकिन यह काम करता है। यदि आपको मार्जिन का उपयोग करने की आवश्यकता है, तो आप div को लपेट सकते हैं जो किसी अन्य 'सामान्य' div में तालिका कक्ष के रूप में प्रदर्शित होता है।
JSFiddle: http://jsfiddle.net/qw4QW/
0
तुम बस इनपुट क्षेत्र के लिए निम्नलिखित सीएसएस का उपयोग कर सकते हैं:
.center-block {
margin: auto;
display: block;
}
,
<div>
<input class="center-block">
</div>
संबंधित मुद्दे
यू हमें बोना कर सकते हैं कि तुम क्या करने की कोशिश की और काम नहीं कर रहा ? – TigerTiger
क्या यह डॉक्टरेट पर नहीं जाना चाहिए? (http://blog.stackoverflow.com/2009/08/stack-overflow-and-doctype/; http://doctype.com/) ... हमारे पास एक संबंधित-ऑन-डॉकटाइप बंद विकल्प क्यों नहीं है ? – derobert