बटन केंद्र सीएसएस

Question

सामान्य सीएसएस केंद्रित मुद्दा, सिर्फ मेरे लिए काम नहीं कर रहा है, समस्या यह है कि मैं समाप्त चौड़ाई px नहीं जानता

मेरे पास पूरे नौसेना के लिए एक div है और फिर प्रत्येक बटन के अंदर, वे एक से अधिक बटन होने पर अब केंद्र नहीं करते हैं। :(

सीएसएस

.nav{
    margin-top:167px;
    width:1024px;
    height:34px;
}

.nav_button{
    height:34px;
    margin:0 auto;
    margin-right:10px;
    float:left;
}

एचटीएमएल

<div class="nav">
        <div class="nav_button">
            <div class="b_left"></div>
            <div class="b_middle">Home</div>
            <div class="b_right"></div>

        </div>
        <div class="nav_button">
            <div class="b_left"></div>
            <div class="b_middle">Contact Us</div>
            <div class="b_right"></div>

        </div>
</div>

किसी भी तरह की सहायता का स्वागत किया जाएगा। धन्यवाद

---

परिणाम

यदि चौड़ाई अज्ञात है, तो मुझे एक ऐसा तरीका मिला जो बटन को केंद्र में रखता है, पूरी तरह से खुश नहीं है, लेकिन यह महत्वपूर्ण नहीं है, यह काम करता है: डी

सबसे अच्छा तरीका है कि इसे एक टेबल में रखा जाए

<table class="nav" align="center">
    <tr>
      <td>
        <div class="nav_button">
            <div class="b_left"></div>
            <div class="b_middle">Home</div>
            <div class="b_right"></div>
        </div>

        <div class="nav_button">
            <div class="b_left"></div>
            <div class="b_middle">Contact Us</div>
            <div class="b_right"></div>
        </div>
      </td>
    </tr>
  </table>

Answer 1

मुझे एहसास है कि यह एक बहुत पुराना सवाल है, लेकिन मैं आज इस समस्या से लड़ रहा हूं और मुझे इसके साथ काम करना है

<div style="text-align:center;">
    <button>button1</button>
    <button>button2</button>
</div>

चीयर्स, मार्क

Comments

ध्यान दें कि इस तत्व के पास फ्लोट के दाईं / बाईं ओर एक अलग तत्व दिखाई दे सकता है।

— shlgug

मुझे विश्वास है कि आप सही हैं, लेकिन क्या सिर्फ <input class="btn btn-primary" style="text-align:center;display:block;" type="submit" value="{% trans 'ButtonPurpose' %}" />

— रोबॉटहैंस

Answer 2

समस्या को हल करने के लिए इसे अपने सीएसएस में जोड़ने पर विचार करें:

button {
    margin: 0 auto;
    display: block;
}

Comments

सबसे बढ़िया उत्तर। कोई बाहरी कंटेनर (शायद) कोई कमियां नहीं हैं।

— कोनराड गौल्ज़ोस्की

Answer 3

एक और अच्छा विकल्प का उपयोग करना है:

width: 40%;
margin-left: 30%;
margin-right: 30%

Comments

यह सामग्री यूआई के लिए काम करता है (और समझ में आता है), अगर बटन केवल एक के अंदर है<Grid item>...</Grid>

— जुआन सल्वाडोर

ओह अच्छा विचार :)

— मार्टिन वोलेक

Answer 4

समस्या निम्नलिखित सीएसएस लाइन के साथ है .nav_button:

margin: 0 auto;

यह केवल तभी काम करेगा जब आपके पास एक बटन होगा, यही कारण है कि जब वे एक से अधिक nav_buttondivs होते हैं, तो वे बंद-केंद्रित होते हैं ।

यदि आप चाहते हैं कि आपके सभी बटन nav_buttonsएक और div में घोंसला केंद्रित हों :

<div class="nav">
    <div class="centerButtons">
        <div class="nav_button">
            <div class="b_left"></div>
            <div class="b_middle">Home</div>
            <div class="b_right"></div>
        </div>
        <div class="nav_button">
            <div class="b_left"></div>
            <div class="b_middle">Contact Us</div>
            <div class="b_right"></div>
        </div>
    </div>
</div>

और इसे इस तरह से स्टाइल करें:

.nav{
    margin-top:167px;
    width:1024px;
    height:34px;
}

/* Centers the div that nests the nav_buttons */
.centerButtons {
    margin: 0 auto;
    float: left;
} 

.nav_button{
    height:34px;
    margin-right:10px;
    float: left;
}

Comments

आपकी पोस्ट के लिए धन्यवाद, दुर्भाग्य से या तो काम नहीं करता है, फिर भी सभी बाईं ओर।

— स्टीवनिकस

हाँ, मुझे बस एहसास हुआ। यह इसलिए है क्योंकि .centerButtons एक ब्लॉक एलिमेंट है और यह .nav में पूरी जगह लेता है, मार्जिन प्रॉपर्टीज को बेकार कर देता है। मैंने इसे अस्थायी रूप से ठीक करने का प्रयास किया ।centerButtons साथ ही, लेकिन कोई भाग्य नहीं।

— एस्प्रेसो

हाँ, मुझे इसकी मुश्किल पता है, मुझे गुस्सा दिलाता है coz मैं इसे पहले किया है, लेकिन याद नहीं कर सकते कैसे:) .... किसी भी विचार?

— स्टीवनिकस

Answer 5

समस्या को हल करने के लिए इसे अपने सीएसएस में जोड़ने पर विचार करें:

.btn {
  width: 20%;
  margin-left: 40%;
  margin-right: 30%;
}

Answer 6

जब बाकी सब मैं विफल रहता है

<center> content </center>

मुझे पता है कि यह "मानकों तक" नहीं है, लेकिन अगर यह काम करता है तो यह काम करता है

Comments

यह उत्तर अन्य उत्तरों में कुछ भी नहीं जोड़ता है। <center>एचटीएमएल 4 में पदावनत किया गया था और एचटीएमएल 5 में भी समर्थित नहीं है, जिसका अर्थ है कि यदि एचटीएमएल 5 का उपयोग किया जाता है तो यह संभवत: काम नहीं करेगा।

— मैग्निलेक्स

मैं केवल इसका उपयोग करता हूं अगर मुझे काम करने के लिए कुछ और नहीं मिल सकता है। मैंने इसका उपयोग उन पृष्ठों में किया है जहाँ html5 है, लेकिन पसंद नहीं है। मैं वहाँ से गुज़रा और बदल दिया, जो मेरे साथ हो सकता था<div align="center">button</div>

— ott

पदावनत टैग, इसका उपयोग करने के लिए एक बुरा अभ्यास है

— सेंचॉक