<div id="photo_leftPanel" style="float: left; width: 604px; position: relative;">
<img src="bla.jpg">
</div>
मैं इस बॉक्स के बीच से छवि कैसे शुरू कर सकता हूं? (मध्यम दोनों लंबवत और क्षैतिज)केंद्र/मध्य दोनों में छवि को लंबवत और क्षैतिज
ऐसा करने के कई तरीके हैं, और अगर यह सभी ब्राउज़रों (IE7 + और बाकी) में काम करने की जरूरत आप इसे कुछ मामलों में काम करने के लिए अलग अलग काम करने की जरूरत है।
पूर्ण स्थिति का उपयोग करें। यह केवल तभी काम करता है जब आप छवि के आकार को जानते हों। यहां आप इसे position: absolute; left: 50%; top: 50%; margin: -<half height of image> 0 0 -<half width of image> पर सेट करें।
यहाँ उदाहरण देखें: http://jsfiddle.net/JPch8/
उपयोग margin: 0 auto;text-align: center; और line-height/font-size। यह थोड़ा और मुश्किल है, क्योंकि पंक्ति-ऊंचाई काम नहीं करती है क्योंकि यह आईई में छवियों जैसे इनलाइन-ब्लॉक तत्वों के लिए होना चाहिए। यही वह जगह है जहां फ़ॉन्ट आकार आता है। असल में, आप छवि कंटेनर की रेखा-ऊंचाई को कंटेनर की ऊंचाई के समान सेट करते हैं। यह लंबवत इनलाइन तत्वों को संरेखित करेगा, लेकिन IE में आपको इसे कार्य करने के लिए फ़ॉन्ट आकार सेट करने की आवश्यकता है।
यहाँ उदाहरण देखें: http://jsfiddle.net/JPch8/2/
कि समर्थन display: flex आप बस देखें उदाहरण यहाँ display: flex; align-items: center; justify-content: center;
के कंटेनर div स्थापना करके यह कर सकते हैं आधुनिक ब्राउज़रों में: https://jsfiddle.net/ptz9k3th/
अच्छा कोड।क्या आपके कोड में 'फ़ॉन्ट-आकार' से पहले तारांकन आवश्यक है और यदि ऐसा है, तो IE के कौन से संस्करण इस कवर को करते हैं? – Sara44
मैंने पहले कथन का उपयोग किया जो पूरी तरह से काम करता है, मैंने अपनी सभी छवियों को अपने स्वयं के div में केंद्रित करने के लिए बस एक रिश्तेदार द्वारा पूर्ण स्थिति को बदल दिया। धन्यवाद! – Elisa
मुझे उम्मीद है कि मैं समझता हूं कि आप क्या हासिल करने की कोशिश कर रहे हैं।
<div id="photo_leftPanel" style="float: left; width: 604px; position: relative;">
<center><img src="bla.jpg" style="vertical-align:middle;"></center>
</div>
-1। आपने अभी 2 बिल्ली के बच्चे को मार डाला है :( –
@ कैस्पर क्लेजने आप सही हैं, मुझे सच में नहीं पता कि सीएसएस में एक छवि को कैसे केंद्रित किया जाए। मुझे टेक्स्ट-एलाइन के बारे में पता है: केंद्र, लेकिन क्या यह छवियों के लिए काम करता है? धन्यवाद –
मार्जिन: ऑटो; या मार्जिन: 0 ऑटो; यदि आप केवल क्षैतिज संरेखण को प्रभावित करना चाहते हैं। – Cfreak
"float:left; position:relative "शायद उम्मीद के रूप में काम नहीं करता है। फ़्लोट किए गए तत्वों को पूर्ण माना जाता है।
छवि को लंबवत रूप से केंद्रित करने के लिए आपको div पर ऊंचाई की आवश्यकता है, और आपको इसके माता-पिता पर ऊंचाई की आवश्यकता है। (लंबवत केंद्रित एक दर्द का प्रकार है)। नीचे मेरा उदाहरण काम करेगा यदि वे आपके एकमात्र तत्व हैं लेकिन ध्यान रखें कि कंटेनर पर height: 100% आपके शेष लेआउट को प्रभावित करेगा।
<html>
<head><title></title>
<style type="text/css">
html, body {
height: 100%;
}
#photo_leftPanel {
height: 500px; /*guessing*/
width: 604px;
float: left;
}
#photo_leftPanel img {
margin: auto;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="photo_leftPanel">
<img src="bla.jpg" />
</div>
</body>
</html>
बॉक्स
<div class="picture_div" style="margin:0px auto; text-align:center;">
<img src="media/BezierCurve.gif" />
</div>
वैकल्पिक रूप से आप width निर्दिष्ट कर सकते हैं के आकार और व्यवस्था छवि केंद्र के लिए में <div> बॉक्स के height (वास्तव में निर्दिष्ट किए बिना text-align:center; के साथ एक <div> में छवि डाल div बॉक्स)।
<div id="blue" style="border:1px solid blue; width:100px; height:100px; margin:10px auto;">
<img src="media/BezierCurve.gif" />
</div>
यदि आपको छवि इनलाइन की आवश्यकता नहीं है, तो आप इसे पृष्ठभूमि की स्थिति के साथ div की पृष्ठभूमि में जोड़ने पर विचार कर सकते हैं: केंद्र और पृष्ठभूमि-दोहराना: दोहराना नहीं। केंद्र टैग का उपयोग करने के लिए –