<html>
<head>
<title>Test</title>
</head>
<body>
<div>
<img src="queuedError.jpg" style="margin:auto; width:200px;" />
</div>
</body>
</html>इसका divविस्तार 100% तक होना चाहिए लेकिन छवि अपने आप में केंद्रित नहीं होती है। क्यों?
<html>
<head>
<title>Test</title>
</head>
<body>
<div>
<img src="queuedError.jpg" style="margin:auto; width:200px;" />
</div>
</body>
</html>इसका divविस्तार 100% तक होना चाहिए लेकिन छवि अपने आप में केंद्रित नहीं होती है। क्यों?
जवाबों:
क्योंकि आपकी छवि एक इनलाइन-ब्लॉक तत्व है । आप इसे इस तरह ब्लॉक-स्तर के तत्व में बदल सकते हैं :
<img src="queuedError.jpg" style="margin:auto; width:200px;display:block" />और इसे केंद्रित किया जाएगा।
आपको इसे ब्लॉक स्तर के रूप में प्रस्तुत करना होगा;
img {
display: block;
width: auto;
margin: auto;
}जोड़ना style="text-align:center;"
कोड के नीचे प्रयास करें
<html>
<head>
<title>Test</title>
</head>
<body>
<div style="text-align:center;vertical-align:middle;">
<img src="queuedError.jpg" style="margin:auto; width:200px;" />
</div>
</body>
</html>display: block;छवि को जोड़ने की अत्यधिक अनुशंसा की जाती है।
मुझे पता है कि यह एक पुरानी पोस्ट है, लेकिन मैं उसी समस्या को हल करना चाहता हूं।
मेरी छवि एक फ्लोट को विरासत में मिली: एक मूल वर्ग से छोड़ी गई। फ्लोट सेट करके: कोई भी मैं मार्जिन बनाने में सक्षम नहीं था: 0 ऑटो और डिस्प्ले: ठीक से काम करना। आशा है कि यह भविष्य में किसी की मदद कर सकता है।
मैंने पाया है कि मुझे ऑब्जेक्ट के लिए एक विशिष्ट चौड़ाई को परिभाषित करना होगा या कुछ और इसे केंद्र नहीं बनाएगा। एक सापेक्ष चौड़ाई काम नहीं करती है।
खुला divतो डाल दिया
style="width:100% ; margin:0px auto;" image टैग (या) सामग्री
करीब का हिस्सा
मैंने पाया है ... मार्जिन: 0 ऑटो; मेरे लिये कार्य करता है। लेकिन मैंने यह भी देखा है कि वर्ग द्वारा एक और विशिष्टता के कारण इसे काम नहीं किया गया था ... फ्लोट: बाएं; तो उस घड़ी के लिए आपको जोड़ने की आवश्यकता हो सकती है ... फ्लोट: कोई नहीं; यह मेरे मामले में काम आया क्योंकि मैं एक मीडिया क्वेरी को कोड कर रहा था।