क्षैतिज और एक div में छवि केंद्रित करने के लिए कैसे खड़ी

मैं अपने पृष्ठ में निम्न मार्कअप कोड है:क्षैतिज और एक div में छवि केंद्रित करने के लिए कैसे खड़ी

<div id="root_img" style="width:100%;height:100%"> 
    <div id="id_immagine" align="center" style="width: 100%; height: 100%;"> 
     <a id="a_img_id" href="./css/imgs/mancante.jpg"> 
      <img id="img_id" src="./css/imgs/mancante.jpg" /> 
     </a> 
    </div> 
</div>

और जैसा कि मैं उम्मीद यह प्रकट नहीं होता है, यह उस तरह लग रहा है:

enter image description here

लेकिन मैं इस परिणाम प्राप्त करना चाहता था:

enter image description here

मैं इस छवि को क्षैतिज और लंबवत कैसे केंद्रित कर सकता हूं?

स्रोत

2012-04-24 CeccoCQ

आपको 2 के बजाय 4 टैग का उपयोग कर रहे हैं करने के लिए accourding

.client_logo

का आकार सेट कर सकते हैं? काम करना चाहिए। – Vivien

मैं div के नीचे छवि देखता हूं, एक्स कुछ प्रस्तुत करता है या मुझे इसे कुछ मान निर्धारित करना है? – CeccoCQ

एक्स आपके लिए कुछ भी अच्छा हो सकता है: "5%", "10px, 0" ... आप मुख्य div – Vivien

यहाँ है एक tutorial कैसे खड़ी छवियों केंद्र के लिए के लिए और एक div में क्षैतिज रूप से।

यहाँ तुम क्या देख रहे है:

.wraptocenter { 
 
    display: table-cell; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: #999; 
 
} 
 
.wraptocenter * { 
 
    vertical-align: middle; 
 
}

<div class="wraptocenter"> 
 
    <img src="http://www.brunildo.org/thumb/tmiri2_o.jpg"> 
 
</div>

स्रोत

2012-04-24 10:34:40 AlphaMale

"wraptocenter" (उदाहरण में) मेरी root_img div के वर्ग है? – CeccoCQ

हाँ, आपको बस इसे अपने एचटीएमएल के अनुसार प्रारूपित करने की आवश्यकता है। – AlphaMale

क्रॉस ब्राउज़र असंगतता ... :( –

ऊर्ध्वाधर संरेखण के लिए, मैं कुछ सीएसएस को शीर्ष 50% से स्थिति में रखने के लिए शामिल करता हूं और फिर इसे छवि की पिक्सल ऊंचाई की आधे संख्या में ले जाता हूं।

क्षैतिज, जैसा कि सुझाव दिया गया है, मैं मार्जिन का उपयोग करूंगा।

तो यदि आपकी छवि 100x100px थी तो आप समाप्त हो जाएंगे। इस तरह

<img id="my_image" src="example.jpg"> 

<style> 
#my_image{ 
position: absolute; 
top: 50%; 
margin: -50px auto 0; 
} 
</style>

स्रोत

2012-04-24 10:27:03

मैंने कोशिश की है, लेकिन मेरे पास छवि है div के नीचे। – CeccoCQ

हाँ, क्षमा करें, मैंने आपका मार्कअप नहीं पढ़ा। बस इसे '' कि लपेटकर है बजाय के रूप में अपने '' –

ही परिणामों पर लागू ... :( – CeccoCQ

-1

कोशिश कुछ:

<div style="display:table-cell; vertical-align:middle"> 
"your content" 
</div>

स्रोत

2012-04-24 10:27:27

छवि और पाठ को अलग ढंग से संरेखित करता है। – Murtaza

-1

का उपयोग कर मार्जिन टॉप

उदाहरण सीएसएस

#id_immagine{ 
    margin:0 auto; 
    }

स्रोत

2012-04-24 10:31:32 srini

दो पहलुओं आप को संबोधित करने की आवश्यकता है। पहला पहलू क्षैतिज संरेखण है। यह मार्जिन के साथ आसानी से प्राप्त किया जा सकता है: स्वतः छवि के आस-पास div तत्व पर स्वतः लागू होता है। डीआईवी को छवि आकार में चौड़ाई और ऊंचाई सेट करने की आवश्यकता है (अन्यथा यह काम नहीं करेगा)। लंबवत केंद्र संरेखण प्राप्त करने के लिए आपको HTML पर कुछ जावास्क्रिप्ट जोड़ने की आवश्यकता है। ऐसा इसलिए है क्योंकि HTML ऊंचाई का आकार पृष्ठ के स्टार्टअप पर ज्ञात नहीं है और बाद में बदल सकता है। सबसे अच्छा समाधान jQuery का उपयोग करना और निम्न स्क्रिप्ट लिखना है: $ (विंडो)।तैयार (फ़ंक्शन() {/ * विंडो तैयार ईवेंट को सुनें - पेज के बाद ट्रिगर किया जा रहा है */ repositionCenteredImage(); });

$(window).resize(function() { /* listen to page resize event - in case window size changes*/ 
     repositionCenteredImage(); 
    }); 

    function repositionCenteredImage() { /* reposition our image to the center of the window*/ 
     pageHeight = $(window).height(); /*get current page height*/ 
     /* 
     * calculate top and bottom margin based on the page height 
     * and image height which is 300px in my case. 
     * We use half of it on both sides. 
     * Margin for the horizontal alignment is left untouched since it is working out of the box. 
     */ 
     $("#pageContainer").css({"margin": (pageHeight/2 - 150) + "px auto"}); 
    }

HTML पृष्ठ जो छवि दिखा रहा है इस तरह दिखता है:

#html, body { 
    margin: 0; 
    padding: 0; 
    background-color: #000; 
} 

#pageContainer { /*css for the whole page*/ 
    margin: auto auto; /*center the whole page*/ 
    width: 300px; 
    height: 300px; 
} 

#logoImage { /*css for the logo image*/ 
    width: 300px; 
    height: 300px; 
}

आप हमारी कंपनी से पूरे समाधान डाउनलोड कर सकते हैं:

<body> 
     <div id="pageContainer"> 
      <div id="image container"> 
       <img src="brumenlabLogo.png" id="logoImage"/> 
      </div> 
     </div> 
    </body>

सीएसएस तत्वों से जुड़ी इस तरह दिखता है निम्नलिखित यूआरएल पर होमपेज:

http://brumenlab.com

स्रोत

2015-04-10 13:58:45

यह समाधान सभी आकार छवियों इस में छवि भी बनाए रखने के है राशन के लिए है।

.client_logo{ 
 
    height:200px; 
 
    width:200px; 
 
    background:#f4f4f4; 
 
} 
 
.display-table{ 
 
    display: table; 
 
    height: 100%; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 
.display-cell{ 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 
.logo-img{ 
 
    width: auto !important; 
 
    height: auto; 
 
    max-width: 100%; 
 
    max-height: 100%; 
 

 
}

<div class="client_logo"> 
 
    <div class="display-table"> 
 
     <div class="display-cell"> 
 
     <img src="http://www.brunildo.org/thumb/tmiri2_o.jpg"> 
 
     </div> 
 
    </div> 
 
</div>

आप आपकी आवश्यकता

स्रोत

2016-10-07 07:31:45

क्षैतिज और एक div में छवि केंद्रित करने के लिए कैसे खड़ी

उत्तर

संबंधित मुद्दे