केंद्र एक div

Question

के अंदर "span" टेक्स्ट संरेखित करें मेरे पास एक HTML कोड है;

<div class="left"> 
<span class="panelTitleTxt">Title text</span> 
</div> 

मेरा सीएसएस निम्नानुसार है;

.left { 
    background-color: #999999; 
    height: 50px; 
    width: 24.5%; 
} 
span.panelTitleTxt { 
       display: block; 
       width: 100%; 
       height: 100%; 
} 

अब मैं कैसे div अंदर अवधि पाठ संरेखित केंद्र करते हैं? (मान लें कि% रूपांतरण के बाद "बाएं" div 100px की पीएक्स चौड़ाई प्राप्त करता है)

मैंने margin:auto का उपयोग करने के मानक तरीके की कोशिश की, लेकिन यह काम नहीं कर रहा है।

इसके अलावा मैं text-align:center का उपयोग करने से बचना चाहता हूं।

क्या इसे ठीक करने का कोई और तरीका है?

Answer 1

आप अवधि 100% चौड़ाई दे रहे हैं जिसके परिणामस्वरूप यह माता-पिता के आकार में विस्तार कर रहा है। इसका मतलब है कि आप इसे केंद्र-संरेखित नहीं कर सकते हैं, क्योंकि इसे स्थानांतरित करने के लिए कोई जगह नहीं है।

आप अवधि को एक चौड़ाई दे सकते हैं, फिर margin:0 auto फिर से जोड़ें। यह केंद्र को संरेखित करेगा।

.left 
{ 
    background-color: #999999; 
    height: 50px; 
    width: 24.5%; 
} 
span.panelTitleTxt 
{ 
    display:block; 
    width:100px; 
    height: 100%; 
    margin: 0 auto; 
} 

Answer 2

यदि आप अवधि की चौड़ाई जानते हैं तो आप बस बाएं हाशिए में सामान डाल सकते हैं।

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

.center {text-align: केंद्र}
div.center अवधि {प्रदर्शन: तालिका; केंद्र "एक वर्ग (जैसे करने के लिए अपने शैली पत्रक में" div.center अवधि: "अपने लिए वर्ग

यदि आप चाहते हैं कुछ फैला केंद्रित है, लेकिन दूसरों को नहीं, की जगह केंद्र।"}

जोड़े -स्पैन ") और उस वर्ग को अवधि में जोड़ें।