मैं क्षैतिज रूप से एक डिव के अंदर एक स्पैन एलिमेंट को कैसे केंद्र करूं

Question

मैं दो लिंक 'व्यू वेबसाइट' और 'व्यू प्रोजेक्ट' को आसपास के डिव के अंदर केन्द्रित करने की कोशिश कर रहा हूँ। क्या कोई बता सकता है कि इस काम को करने के लिए मुझे क्या करने की आवश्यकता है?

जेएस फिडल: http://jsfiddle.net/F6R9C/

एचटीएमएल

<div>
  <span>
    <a href="#" target="_blank">Visit website</a>
    <a href="#">View project</a>
  </span>
</div>

सीएसएस

div { background:red;overflow:hidden }

span a {
    background:#222;
    color:#fff;
    display:block;
    float:left;
    margin:10px 10px 0 0;
    padding:5px 10px
}

Comments

संबंधित: stackoverflow.com/questions/7886460/…

— Ciro Santilli over .com/ .com/ .com/ 六四 六四

यहाँ एक div के भीतर तत्वों को केंद्र में रखने के दो सरल तरीके हैं, लंबवत, क्षैतिज या दोनों (शुद्ध CSS): stackoverflow.com/a/31977476/3597276

— माइकल बेंजामिन

Answer 1

एक विकल्प यह है कि <a>प्रदर्शन को प्रदर्शित किया जाए inline-blockऔर फिर text-align: center;युक्त ब्लॉक पर लागू करें (फ्लोट को भी हटा दें):

div { 
    background: red;
    overflow: hidden; 
    text-align: center;
}

span a {
    background: #222;
    color: #fff;
    display: inline-block;
    /* float:left;  remove */
    margin: 10px 10px 0 0;
    padding: 5px 10px
}

http://jsfiddle.net/Adrift/cePe3/

Comments

यह एक मामूली जटिल विषय में मेरे लिए चाल है जो मुझे थोड़ा हैक करने की आवश्यकता थी। JSFiddle का लिंक आगे मुझे परीक्षण करने की अनुमति देने के लिए बहुत बढ़िया था। "अतिप्रवाह: छिपा हुआ" को "अतिप्रवाह: छिपाया" में शामिल करने के लिए मैंने इस प्रविष्टि को संपादित किया;

— आकर्षित .. 16

बहुत साफ समाधान की तरह दिखता है।

— जिम अहो सेप

नीचे अहमद की उत्कृष्टता का उत्तर देखें, शैली = "पाठ-संरेखण: केंद्र", यह बहुत अधिक संक्षिप्त है।

— वालेस होवेरी

Answer 2

दूसरा विकल्प यह होगा कि आप स्पैन दें display:table;और इसके माध्यम से केंद्र बनाएंmargin:0 auto;

span {
display:table;
margin:0 auto;
}

Comments

एक ही समस्या के लिए विभिन्न विलेय को देखना हमेशा दिलचस्प होता है।

— जिम अहो

केवल पिछले कुछ वर्षों में अपडेट किए गए ब्राउज़रों पर समर्थित है। caniuse.com/#feat=css-table

— कैमहार्ट

सबसे अच्छा समाधान आईएमओ

— मार्टिज़न शेफ़र

Answer 3

<div style="text-align:center">
    <span>Short text</span><br />
    <span>This is long text</span>
</div>

Answer 4

inline-blockउस तत्व को लागू करना जो केंद्रित होना है और text-align:centerमूल ब्लॉक पर लागू करना मेरे लिए चाल है।

<span>टैग पर भी काम करता है ।

Answer 5

स्पैन से निपटने के लिए थोड़ा मुश्किल हो सकता है। यदि आप सिखाने की अवधि निर्धारित करते हैं तो आप इसका उपयोग कर सकते हैं

margin: 0 auto;

उन्हें केन्द्रित करने के लिए, लेकिन वे अलग-अलग रेखाओं पर समाप्त होते हैं। मैं आपको अपनी संरचना के लिए एक अलग दृष्टिकोण की कोशिश करने का सुझाव दूंगा।

यहाँ मैं अपने सिर के ऊपर से बंद के साथ jsfiddle कैम है: jsFiddle

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

Adrift का जवाब है सबसे आसान उपाय :)

Answer 6

मुझे लगता है कि आप उन्हें एक पंक्ति पर केन्द्रित करना चाहते हैं न कि अपनी फ़ाइडल के आधार पर दो अलग-अलग रेखाओं पर। अगर ऐसा है, तो निम्नलिखित सीएसएस आज़माएं:

 div { background:red;
      overflow:hidden;
}
span { display:block;
       margin:0 auto;
       width:200px;
}
span a { padding:5px 10px;
         color:#fff;
         background:#222;
}

जब से आप इसे केन्द्रित करना चाहते हैं, मैंने फ्लोट को हटा दिया, और फिर मार्जिन जोड़कर आस-पास की दूरी बना दी: उनके लिए 0 ऑटो। अंत में, मैंने स्पैन में एक स्थिर चौड़ाई जोड़ी। यह लाल रेखा के भीतर एक पंक्ति के लिंक को केंद्र में रखता है।

Answer 7

केवल सीएसएस डिव आप सामग्री को केंद्र में रख सकते हैं

div{
       display:table;
       margin:0 auto;
    }

http://jsfiddle.net/4q2r69te/1/