क्या इनलाइन-ब्लॉक तत्व को केंद्र करना संभव है और यदि हां, तो कैसे?

Question

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

.equationElement 
{ 
    display: inline-block; 
    margin-left: auto; 
    margin-right: auto; 
} 

और समस्या का समाधान नहीं हो सकता है:

.equationElement 
{ 
    display: block; 
    width: 100px; 
    margin-left: auto; 
    margin-right: auto; 
} 

क्योंकि मुझे पता नहीं क्या चौड़ाई वास्तव में पहले से और समीकरण पर उपयोगकर्ता क्लिक करता है, तो होना चाहिए, मुझे पूरे समीकरण को हाइलाइट करने की ज़रूरत है, इसलिए मैं चौड़ाई को 0 पर सेट नहीं कर सकता। क्या किसी के पास इस समीकरण को केंद्रित करने का कोई समाधान है?

Answer 1

बस कंटेनर पर text-align: center; सेट करें।

Here's a demo।

Answer 2

यह करने के लिए एक और तरीका है (ब्लॉक तत्व भी के लिए काम करता है):

.center-horizontal { 
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
} 

स्पष्टीकरण: बाईं: 50%, तत्व माता-पिता से युक्त के केंद्र से शुरू करने की स्थिति में होगा तो आप करना चाहते हैं इसे को अपनी चौड़ाई के आधे से बदलकर ट्रांसफॉर्म करें: translateX (-50%)

नोट 1: माता-पिता को स्थिति में रखने की स्थिति सेट करना सुनिश्चित करें: सापेक्ष; अगर माता-पिता पूरी तरह से रखा जाता है इसके अंदर एक 100% चौड़ाई और ऊंचाई, 0 गद्दी और मार्जिन div रख दिया और यह स्थिति दे: रिश्तेदार

टिप्पणी 2: भी केंद्रित ऊर्ध्वाधर के लिए संशोधित किया जा सकता है

top:50%; 
transform: translateY(-50%); 

Answer 3

एक छोटी सी के साथ देर से, लेकिन Ivek के जवाब के लिए इसी तरह, आप margin-leftleft का उपयोग कर के बजाय द्वारा position घोषणा का उपयोग कर से बचने कर सकते हैं, इसलिए:

margin-left: 50%; transform: translateX(-50%);