<input> प्रदर्शन के साथ: एक पाठ के अनुरूप अंदर ब्लॉक: केंद्र div इस के साथ

Question

:

<div id="parentdiv" style="text-align:center;width:600px;margin:auto;"> 
    <input type="button" value="push me" /> 
</div> 

बटन एफएफ, क्रोम, IE7 और IE8 में ब्राउज़र विंडो के केंद्र (के रूप में आवश्यक होने पर) के लिए गठबंधन किया है।

लेकिन, जोड़ें: बटन के लिए "प्रदर्शन ब्लॉक":

<div id="parentdiv" style="text-align:center;width:600px;margin:auto;"> 
    <input type="button" style="display:block;" value="push me" /> 
</div> 

बटन IE7 में केंद्र के लिए गठबंधन किया है - और एफएफ, क्रोम और IE8 में केंद्र को संरेखित नहीं है।

क्यों? और एक बटन (या कोई < इनपुट >) डिस्प्ले के साथ: ब्लॉक किसी तरह से केंद्र-गठबंधन हो सकता है? (< केंद्र > का उपयोग करने के अलावा - जो सभी ब्राउज़रों पर काम करता है, बीटीडब्ल्यू - लेकिन "वर्जित" है ...)

Answer 1

इस तरह यह काम कर सकते हैं:

<input type="button" style="width:100px;margin:0 auto;display:block;" value="push me" /> 

एक ब्लॉक इनपुट (मूल रूप से प्रदर्शन: इनलाइन तत्व) बाध्य करने के लिए केंद्रित किया जाना है, तो आप एक निश्चित चौड़ाई निर्धारित करें और फिर मार्जिन 0 ऑटो पर सेट करें;)

Answer 2

तत्व जो blocks are centred with auto margins के रूप में प्रदर्शित होते हैं। text-align संपत्ति केवल inline children केंद्र होना चाहिए। इंटरनेट एक्सप्लोरर में इसके आस-पास कीड़े हैं।

Answer 3

css standard से

:

यह गुण वर्णन करता है कि एक ब्लॉक की इनलाइन सामग्री क्षैतिज संरेखित हैं

इसलिए जब अपने तत्वों (कोई फर्क नहीं पड़ता कि वे क्या कर रहे हैं, divs, स्पान, आदानों, आदि ।) इनलाइन हैं, टेक्स्ट-एलाइन पर उनके प्रभाव पड़ते हैं, और जब वे प्रदर्शित होते हैं: ब्लॉक, मानक परिभाषा के अनुसार, पाठ-संरेखण उन्हें

को मार्जिन सेट करके इसे ठीक कर सकता है: 0 ऑटो और चौड़ाई को ठीक करना , पसंद steweb सुझाव दिया, या वैकल्पिक रूप (आपकी विशिष्ट आवश्यकताओं के आधार पर):

<input type="button" style="display:inline-block;" value="push me" />