मैं क्षैतिज रूप से 100% चौड़ाई div के अंदर एक पूर्ण स्थान तत्व को कैसे केंद्रित करूं?

Question

नीचे दिए गए उदाहरण में, #logo बिल्कुल स्थित है और मुझे #header के भीतर क्षैतिज रूप से केंद्रित होने की आवश्यकता है। आम तौर पर, मैं अपेक्षाकृत तैनात तत्वों के लिए margin:0 auto करता हूं लेकिन मैं यहां फंस गया हूं। क्या कोई मुझे रास्ता दिखा सकता है?

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

एचटीएमएल

<div id="header"> 
    <div id="logo"></div> 
</div> 

सीएसएस

#header { 
    background:black; 
    height:50px; 
    width:100%; 
} 

#logo { 
    background:red; 
    height:50px; 
    position:absolute; 
    width:50px 
} 

Answer 1

आप छोड़ दिया विशेषता पर केंद्र संरेखित करने के लिए चाहते हैं।
वही बात शीर्ष संरेखण के लिए है, आप मार्जिन-टॉप का उपयोग कर सकते हैं: (आपके div की चौड़ाई/2), अवधारणा बाएं विशेषता का समान है।
हेडर तत्व को स्थिति में सेट करना महत्वपूर्ण है: सापेक्ष।
इस प्रयास करें:

#logo { 
    background:red; 
    height:50px; 
    position:absolute; 
    width:50px; 
    left:50%; 
    margin-left:-25px; 
} 

DEMO

आप गणना का उपयोग नहीं करना चाहते हैं तो आप ऐसा कर सकते हैं:

#logo { 
    background:red; 
    width:50px; 
    height:50px; 
    position:absolute; 
    left: 0; 
    right: 0; 
    margin: 0 auto; 
} 

DEMO2

Answer 2

आप दोनों left आवंटित करने के लिए करना होगा और right संपत्ति 0 मूल्य लोगो को केन्द्रित करने के लिए margin: auto के लिए।

तो इस मामले में:

#logo { 
    background:red; 
    height:50px; 
    position:absolute; 
    width:50px; 
    left: 0; 
    right: 0; 
    margin: 0 auto; 
} 

तुम भी #header के लिए position: relative सेट कर सकते हैं।

यह काम करता है क्योंकि, left और right शून्य पर सेटिंग क्षैतिज रूप से पूरी तरह से स्थित तत्व को फैलाएगी। अब जादू होता है जब marginauto पर सेट होता है। margin सामग्री को अपने निर्दिष्ट width पर छोड़कर सभी अतिरिक्त स्थान (समान रूप से प्रत्येक तरफ) लेता है। यह परिणाम सामग्री गठबंधन बनने में परिणाम।

Answer 3

मेरे अनुभव में, सबसे अच्छा तरीका right:0;, left:0; और margin:0 auto है। इस तरह यदि div विस्तृत है तो आप left: 50%; से बाधित नहीं हैं जो आपके div को ऑफसेट करेगा जिससे नकारात्मक मार्जिन इत्यादि शामिल हो जाएंगे।

डेमो http://jsfiddle.net/kevinPHPkevin/DeTJH/4/

#logo { 
    background:red; 
    height:50px; 
    position:absolute; 
    width:50px; 
    margin:0 auto; 
    right:0; 
    left:0; 
} 

Answer 4

यहाँ

सबसे अच्छा अभ्यास स्थिति पूर्ण रूप एक div केंद्र के लिए विधि है

DEMO FIDDLE

कोड -

#header { 
background:black; 
height:90px; 
width:100%; 
position:relative; // you forgot this, this is very important 
} 

#logo { 
background:red; 
height:50px; 
position:absolute; 
width:50px; 
margin: auto; // margin auto works just you need to put top left bottom right as 0 
top:0; 
bottom:0; 
left:0; 
right:0; 
} 

Answer 5

के उपयोग याद आ रही थी calc में जवाब, जो एक क्लीनर समाधान है।

#logo { 
    position: absolute; 
    left: calc(50% - 25px); 
    height: 50px; 
    width: 50px; 
    background: red; 
} 

अधिकांश आधुनिक ब्राउज़र में

काम करता है: http://caniuse.com/calc

शायद यह भी जल्द ही एक वापस आने के बिना इसका इस्तेमाल करने की है, लेकिन मैं भावी आगंतुकों के लिए हो सकता है सोचा था कि यह उपयोगी होगा।

Answer 6

इसका आसान है, बस इतना की तरह एक रिश्तेदार बॉक्स में लपेट:

<div class="relative"> 
<div class="absolute">LOGO</div> 
</div> 

रिश्तेदार बॉक्स एक मार्जिन है: 0 ऑटो; और, महत्वपूर्ण, चौड़ाई ...