छवि को केंद्र और मध्य भाग में संरेखित करें

302

मेरे पीछे div है

<div id="over" style="position:absolute; width:100%; height:100%>
 <img src="img.png">
</div>

छवि को संरेखित कैसे करें ताकि मध्य और केंद्र के मध्य में स्थित हो?

html css

— Dro1n2
स्रोत

12

डुप्लीकेट ने 2 मिनट पहले पूछा: CSS: छवि मध्य

— Pekka

1

इसी तरह के विषय यहाँ: stackoverflow.com/questions/18516317/…

— हशम क़ोलमी

एक उत्तर को सही मानने पर विचार करें।

— मैक्कोंक

— संभवत:

406

body {
  margin: 0;
}

#over img {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

<div id="over" style="position:absolute; width:100%; height:100%">
  <img src="http://www.garcard.com/images/garcard_symbol.png">
</div>

स्निपेट का विस्तार करें

JSFiddle

— गुरप्रीत सिंह
स्रोत

4

display: block;मेरा नुकसान हुआ था। TnX

— उज्जवल सिंह

2

निम्नलिखित काम नहीं करता है। मैं क्या गलती कर रहा हूं? <html> <head> <style> #over img {प्रदर्शन: ब्लॉक; मार्जिन-वाम: ऑटो; मार्जिन-राइट: ऑटो; } </ style> </ head> <body> <div id = "over" style = "स्थिति: निरपेक्ष; चौड़ाई: 100%; ऊँचाई: 100%"> <img src = " img8a.flixcart.com/image/ tablet / f / k / t /… ”> </ div> </ body> </ html>

— nizam.sp

1

यदि हम display: blockडिफ़ॉल्ट का उपयोग नहीं करते हैं तो w3schools.com/cssref/pr_class_display.asp केdisplay: inline अनुसार है । हमें ब्लॉक का उपयोग करने की आवश्यकता क्यों है? मैंने मेरे लिए काम किया है, लेकिन यह निश्चित नहीं है कि ब्लॉक आईएमजी और इनलाइन को केंद्र में क्यों रखेगा।

— user3731622 20

क्योंकि इनलाइन लाइन में नहीं चलती है, यह वास्तव में लाइन में है। इसलिए मार्जिन ऑटो अप्रभावी है।

— netalex

12

यह अनुलंब रूप से संरेखित नहीं करता है

— अल्पदेव

170

<div style="display:table-cell; vertical-align:middle; text-align:center">
<img src="img.png">
</div>

— जॉन के।
स्रोत

6

शीर्ष उत्तर, बहुत उपयोगी!

— इलियन एंड्रीव

1

बहुत छोटा और आसान समाधान, लेकिन यह केवल एक निश्चित, गैर-प्रतिशत चौड़ाई और ऊंचाई के साथ काम करता प्रतीत होता है। यह फ्लोट के साथ काम करता है, हालांकि उसके लिए +1। - jsfiddle.net/2s2nY/2

— मैग्नेट्रोनी

1

लेकिन यह केवल ऊर्ध्वाधर-संरेखण कर रहा है लेकिन क्षैतिज अधिकार नहीं है?

— वी-SHY

1

यह काम नहीं करेगा अगर छवि की चौड़ाई div की चौड़ाई से अधिक है।

— दावुज

5

यदि हम डिस्प्ले हटाते हैं: टेबल-सेल; यह पूरी तरह से काम करता है।

— अहसानाली सुथार

103

यह फ्लेक्सबॉक्स लेआउट का उपयोग करके भी किया जा सकता है:

स्टेटिक आकार

.parent {
    display: flex;
    height: 300px; /* Or whatever */
    background-color: #000;
}

.child {
    width: 100px;  /* Or whatever */
    height: 100px; /* Or whatever */
    margin: auto;  /* Magic! */
}

<div class="parent">
    <img class="child" src="https://i.vimeocdn.com/portrait/58832_300x300"/>
</div>

स्निपेट का विस्तार करें

डायनामिक आकार

html, body {
  width: 100%;
  height: 100%;
  display: flex;
  background-color: #999;
}

* {
  margin: 0;
  padding: 0;
}

.parent {
  margin: auto;
  background-color: #000;
  display: flex;
  height: 80%;
  width: 80%;
}

.child {
  margin: auto;  /* Magic! */
  max-width: 100%;
  max-height: 100%;
}

<div class="parent">
  <img class="child" src="https://i.vimeocdn.com/portrait/58832_300x300"/>
</div>

स्निपेट का विस्तार करें

मुझे इस लेख में उदाहरण मिला , जो लेआउट का उपयोग करने के तरीके के बारे में बताता है।

— aerdman
स्रोत

स्टैटिक साइज़ में, बच्चे के लिए चौड़ाई और ऊँचाई की कोई आवश्यकता नहीं है (कम से कम मेरे फ़ायरफ़ॉक्स के संस्करण में)।

— रोड्रिगो

91

मुझे लगता है कि आप भी उस छवि को कंटेनर के भीतर लंबवत होना चाहते थे। (मैंने ऐसा कोई जवाब नहीं देखा जो प्रदान किया गया हो)

काम कर रहे बेला:

शुद्ध सीएसएस समाधान
दस्तावेज़ प्रवाह को नहीं तोड़ना (कोई फ़्लोट या पूर्ण स्थिति नहीं)
क्रॉस ब्राउज़र संगतता (IE6 भी)
पूरी तरह से उत्तरदायी।

एचटीएमएल

<div id="over">
    <span class="Centerer"></span>
    <img class="Centered" src="http://th07.deviantart.net/fs71/200H/f/2013/236/d/b/bw_avlonas_a5_beach_isles_wallpaper_image_by_lemnosexplorer-d6jh3i7.jpg" />
</div>

सीएसएस

*
{
    padding: 0;
    margin: 0;
}
#over
{
    position:absolute;
    width:100%;
    height:100%;
    text-align: center; /*handles the horizontal centering*/
}
/*handles the vertical centering*/
.Centerer
{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.Centered
{
    display: inline-block;
    vertical-align: middle;
}

नोट: यह समाधान किसी भी तत्व के भीतर किसी भी तत्व को संरेखित करने के लिए अच्छा है। IE7 के लिए, .Centeredब्लॉक तत्वों पर कक्षा को लागू करते समय , आपको inline-blockकाम करने के लिए एक और चाल का उपयोग करना होगा। (ऐसा इसलिए है क्योंकि IE6 / IE7 ब्लॉक तत्वों पर इनलाइन-ब्लॉक के साथ अच्छा नहीं खेलते हैं)

— avrahamcool
स्रोत

अतिरिक्त होने के बजाय span, आप छद्म तत्व का उपयोग कर सकते हैं :before: jsfiddle.net/xaliber/cj6zhtp0

— मृत्युंजय

@ डब्लॉक यह सर्वविदित है। लेकिन मैं पुराने IE ब्राउज़रों को लक्षित कर रहा था (जो छद्म तत्वों का समर्थन नहीं करते थे)।

— अवरामहूल

1

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

— मृत्युंजय

1

आपका क्या मतलब है "दस्तावेज़ प्रवाह को नहीं तोड़ना (कोई फ़्लोट या पूर्ण स्थिति नहीं)" ?? क्या है #over { position:absolute; width:100%; height:100%;?

— रोड्रिगो

1

@ रोड्रिगो वास्तव में, यदि आपको पुराने ब्राउज़र को लक्षित करने की आवश्यकता नहीं है तो यह फ्लेक्सबॉक्स अनुशंसित दृष्टिकोण है।

— अवरामहूल

62

img.centered {
   display: block;
   margin: auto auto;
}

— नितिन
स्रोत

1

यह इस उत्तर के

— suhailvs

32

आप इसे डिस्प्ले का उपयोग करके आसानी से कर सकते हैं: फ्लेक्स सीएसएस प्रॉपर्टी

#over {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

— तनवीर अहमद डार
स्रोत

यह मेरे लिए काम करने वाला है। पग / एससीएसएस में छवि का गहरा संबंध है। धन्यवाद।

— मोगेंस ट्रैशर्डके

29

#over {position:relative; text-align:center; 
       width:100%; height:100%; background:#CCC;}

#over img{
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

— धीर
स्रोत

यह सही उत्तर है, जो वास्तव में दोनों लंबवत और क्षैतिज रूप से केंद्र में है।

— अलेक्जेंडर किम

अब तक का सबसे अच्छा जवाब।

— किरन पिपला

13

मैं अभी भी यहाँ प्रस्तुत अन्य समाधान के साथ कुछ मुद्दे थे। अंत में यह मेरे लिए सबसे अच्छा काम किया:

<div class="parent">
    <img class="child" src="image.png"/>
</div>

css3:

.child {
 display: block;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 -webkit-transform: translate(-50%, -50%); /* Safari and Chrome */
 -moz-transform: translate(-50%, -50%); /* Firefox */
 -ms-transform: translate(-50%, -50%); /* IE 9 */
 -o-transform: translate(-50%, -50%); /* Opera */
 // I suppose you may like those too:
 // max-width: 80%;
 // max-height: 80%;
}

आप इस पृष्ठ पर उस दृष्टिकोण के बारे में अधिक पढ़ सकते हैं ।

— pawel7318
स्रोत

मुझे पैरेंट सीएसएस भी जोड़ना था लेकिन आपके कोड ने पूरी तरह से काम किया! स्थिति: रिश्तेदार; चौड़ाई: 100%; बाईंओर तैरना; छिपा हुआ सैलाब; न्यूनतम ऊंचाई: 189px;

— user2593040

10

मूल रूप से, ऑटो में दाएं और बाएं मार्जिन सेट करने से छवि को केंद्र संरेखित किया जाएगा।

<div id="over" style="position:absolute; width:100%; height:100%>
<img src="img.png" style="display: block; margin: 0 auto;">
</div>

— Garconis
स्रोत

8

यह एक सरल दृष्टिकोण होगा

#over > img{
    display: block;
    margin:0 auto; 
}

— सुजय श्रीधर
स्रोत

7

Daaawx का जवाब काम करता है, लेकिन मुझे लगता है कि अगर हम इनलाइन css को खत्म कर दें तो यह साफ हो जाएगा।

body {
	margin: 0;
}

#over img {
	margin-left: auto;
	margin-right: auto;
	display: block;
}
div.example {
  position: absolute;
  width: 100%;
  height: 100%;
}

<div class="example" id="over">
	<img src="http://www.garcard.com/images/garcard_symbol.png">
</div>

स्निपेट का विस्तार करें

— LizardKG
स्रोत

6

की स्थापना img को display: inline-ब्लॉक , जबकि बेहतर सेट होने div करने के लिए पाठ के अनुरूप: केंद्र भी काम करेगा

संपादित करें: उन लोगों के लिए जो प्रदर्शन के साथ खेल रहे हैं : इनलाइन-ब्लॉक >>> यह मत भूलना कि जैसे दो divs

<div>Div1 content</div>NOSPACEHERE<div>Div2 content</div>

वास्तव में उनके बीच कोई स्थान नहीं है (जैसा कि यहां देखा गया है)।

इनसे बचने के लिए बस बुनियादी (इनलाइन ब्लॉक इनहेल्ड) अंतराल उनके बीच है। इन अंतरालों को हर दो शब्दों के बीच देखा जा सकता है जो मैं अभी लिख रहा हूँ! :-) तो .. उम्मीद है कि यह आप में से कुछ में मदद करता है।

— साशा
स्रोत

6

सरल। 2018. फ्लेक्सबॉक्स। ब्राउज़र समर्थन की जांच करने के लिए - क्या मैं

न्यूनतम समाधान का उपयोग कर सकता हूं :

div#over { 
   display: flex; 
   justify-content: center; 
   align-items: center; 
}

विस्तृत ब्राउज़र समर्थन प्राप्त करने के लिए:

div#over { 
   display: -webkit-flex;
   display: -ms-flex; 
   display: flex; 
   justify-content: center; 
   -ms-align-items: center; 
   align-items: center; 
}

— Nadav
स्रोत

5

मैंने कई तरीकों की कोशिश की है, लेकिन यह केवल एक कंटेनर डिव के अंदर कई इनलाइन तत्वों के लिए काम करता है। यहाँ बीच में div में सब कुछ संरेखित करने के लिए कोड है।

सीएसएस

.divContainer
{
    vertical-align: middle;
    text-align: center; <!-- If you want horizontal center alignment -->
}
.divContainer > *
{
    vertical-align: middle;
}

एचटीएमएल

<div class="divContainer">
    <span>Middle Text</span>
    <img src="test.png"/>
</div>

नमूना कोड यहाँ है: https://jsfiddle.net/yogendrasinh/2vq0c68m/

— योगी
स्रोत

5

सीएसएस फ़ाइल

.over {
    display : block;
    margin : 0px auto;

— सबरीश आर
स्रोत

3

यह न्यूनतम कोड आज़माएं:

<div class="outer">
    <img src="image.png"/>
</div>

और सीएसएस:

.outer{
  text-align: center;
}
.outer img{
  display: inline-block;
}

— luchopintado
स्रोत

3

खैर, हम 2016 में हैं ... फ्लेक्सबॉक्स का उपयोग क्यों नहीं करते हैं? यह उत्तरदायी भी है। का आनंद लें।

#over{
display:flex;
align-items:center;
justify-content:center;
}

<div id="over">
	<img src="http://www.garcard.com/images/garcard_symbol.png">
</div>

स्निपेट का विस्तार करें

— GabMic
स्रोत

1

प्यार css3! धन्यवाद। हालांकि, यह नोट करने के लिए अच्छा है कि यह केवल आधुनिक ब्राउज़रों (IE को छोड़कर) में काम करेगा। अन्य सभी ब्राउज़रों पर कोई प्रभाव नहीं पड़ेगा।

— नील

2

कई उत्तर का उपयोग करने का सुझाव देता है, margin:0 autoलेकिन यह तभी काम करता है जब आप जिस तत्व को केंद्रित करने की कोशिश कर रहे हैं वह बाईं या दाईं ओर नहीं चल रहा है, जो कि floatसीएसएस विशेषता सेट है। ऐसा करने के लिए यह displayविशेषता लागू होती है table-cellऔर फिर बाईं और दाईं ओर ऑटो पर मार्जिन लागू करें जिससे आपकी शैली दिखेगीstyle="display:table-cell;margin:0 auto;"

— vikas devde
स्रोत

2

    <div>
    <p style="text-align:center; margin-top:0px; margin-bottom:0px; padding:0px;">
    <img src="image.jpg" alt="image"/>
    </p>    
    </div>

— betty.88
स्रोत

2

HTML:

<div id="over">
    <img src="img.png">
</div>

सीएसएस:

#over {
  text-align: center;
}

#over img {
  vertical-align: middle;
}

— लाहोरी
स्रोत

यह सबसे अच्छा है अगर आप कुछ कमेंट्री जोड़ते हैं और न कि सिर्फ कोड आउट करते हैं।

— प्रकाश कुमार

2

केंद्र के लिए क्षैतिज रूप से बस रखा जाता है

#over img {
    display: block;
    margin: 0 auto;
    clear:both;
}

एक अन्य विधि:

#over img {
    display: inline-block;
    text-align: center;
}

केंद्र के लिए लंबवत

   #over img {

           vertical-align: middle;
        }

— संजीब देबनाथ
स्रोत

2

यह मेरे लिए काम किया:

#image-id {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: auto;
    margin: 0 auto;
}

— Sileria
स्रोत

2

इसने मेरे लिए चाल चली।

<div class="CenterImage">
         <asp:Image ID="BrandImage" runat="server" />
</div>

'ध्यान दें: इस मामले में' BrandImage 'के लिए एक सीएसएस क्लास नहीं ली गई है

सीएसएस:

.CenterImage {
    position:absolute; 
    width:100%; 
    height:100%
}

.CenterImage img {
    margin: 0 auto;
    display: block;
}

— julian9876
स्रोत

2

यह मेरे लिए तब काम करता है जब आपको छवि को संरेखित करना होता है और आपके माता-पिता की छवि पूरी स्क्रीन को कवर करती है। अर्थात् ऊंचाई: 100% और चौड़ाई: 100%

#img{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

— अक्षय बंदे
स्रोत

1

स्थिति का उपयोग करें। निम्नलिखित ने मेरे लिए काम किया ...

छवि के केंद्र में ज़ूम के साथ (छवि div को भरती है):

div{
    display:block;
    overflow:hidden;
    width: 70px; 
    height: 70px;  
    position: relative;
}
div img{
    min-width: 70px; 
    min-height: 70px;
    max-width: 250%; 
    max-height: 250%;    
    top: -50%;
    left: -50%;
    bottom: -50%;
    right: -50%;
    position: absolute;
}

छवि के केंद्र पर ज़ूम किए बिना (छवि div नहीं भरती):

   div{
        display:block;
        overflow:hidden;
        width: 100px; 
        height: 100px;  
        position: relative;
    }
    div img{
        width: 70px; 
        height: 70px; 
        top: 50%;
        left: 50%;
        bottom: 50%;
        right: 50%;
        position: absolute;
    }

— ThomasAFink
स्रोत

1

इसके लिए चिह्नित उत्तर छवि को लंबवत संरेखित नहीं करेगा। आधुनिक ब्राउज़रों के लिए एक उपयुक्त समाधान फ्लेक्सबॉक्स है। एक फ्लेक्स कंटेनर को क्षैतिज और लंबवत दोनों तरह से अपनी वस्तुओं को संरेखित करने के लिए कॉन्फ़िगर किया जा सकता है।

<div id="over" style="position:absolute; width:100%; height:100%; display: flex; align-items: center; justify-content: center;">
    <img src="img.png">
</div>

— WDuffy
स्रोत

यह समाधान प्रश्न का उत्तर देता है और चिह्नित उत्तर के विपरीत काम करता है। शायद डाउन-वोटर अपने निर्णय को विस्तार से बता सके?

— डब्ल्यूडीफ्री

6

समीक्षा कतार से : मैं आपसे अनुरोध कर सकता हूं कि कृपया अपने स्रोत-कोड के आसपास कुछ संदर्भ जोड़ें। कोड-ओनली उत्तर समझना मुश्किल है। यह पूछने वाले और भविष्य के पाठकों दोनों की मदद करेगा यदि आप अपनी पोस्ट में अधिक जानकारी जोड़ सकते हैं।

— आरबीटी

1

यह गिरावट का औचित्य नहीं है। उत्तर तकनीकी रूप से सही है और भविष्य के पाठकों की मदद करेगा। मैंने घर के नियमों का सम्मान करने के लिए उत्तर निकाय को अपडेट किया है, लेकिन शायद कोर टीम द्वारा एक अधिक प्रत्यक्ष समाधान लागू किया जाना चाहिए क्योंकि कोड की पहचान केवल उत्तर एक तुच्छ कार्य है।

— डब्ल्यूडीएफआई

0

आप इस समाधान पर एक नज़र डाल सकते हैं:

एक बॉक्स में क्षैतिज और लंबवत छवि केंद्रित करना

<style type="text/css">
.wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: ...;
    height: ...;
}
.wraptocenter * {
    vertical-align: middle;
}
.wraptocenter {
    display: block;
}
.wraptocenter span {
    display: inline-block;
    height: 100%;
    width: 1px;
}
</style>
<!--[if lt IE 8]-->
<style>
.wraptocenter span {
    display: inline-block;
    height: 100%;
}
</style>
<!--[endif]-->

<div class="wraptocenter"><span></span><img src="..." alt="..."></div>

— fpauer
स्रोत

0

एक सरल तरीका दोनों div और छवि के लिए अलग-अलग शैलियों का निर्माण होगा और फिर उन्हें स्वतंत्र रूप से स्थिति देगा। यदि मैं अपनी छवि स्थिति को 50% पर सेट करना चाहता हूं, तो मेरे पास कोड होगा जो निम्न की तरह दिखता है ....

#over{
  position:absolute;
  width:100%;
  height:100%;
}
#img{
  position:absolute;
  left:50%;
  right:50%;
}

<div id="over">
 <img src="img.png" id="img">
</div>

स्निपेट का विस्तार करें

— KSJ10
स्रोत

बस मुझे बताएं कि क्या यह सभी प्रकार के ब्राउज़रों के साथ काम करता है, भले ही यह एक बुनियादी बात है कि हर ब्राउज़र को समर्थन करना होगा (अन्यथा इसे ब्राउज़र नहीं कहेंगे)

— केएसजे 10

0

#over {
    display: table-cell; 
    vertical-align: middle; 
    text-align: center;
    height: 100px;
}

अपनी आवश्यकता के लिए ऊंचाई मान को संशोधित करें।

— टेरी लिन
स्रोत

0

यह काम करना चाहिए।

टेस्ट के लिए महत्वपूर्ण: कोड स्निपेट चलाने के लिए बाएं बटन पर क्लिक करें आरयूएन कोड स्निपेट , फिर दायां लिंक पूर्ण पृष्ठ

#fader{
position:fixed;z-index: 10;
top:0;right:0;bottom:0;left:0;
opacity: 0.8;background: black;
width:100%;height:100%;
text-align: center;
}
.faders{display:inline-block;height:100%;vertical-align:middle;}
.faderi{display:inline-block;vertical-align:middle;}

<div id="fader">
<span class="faders"></span>
<img class="faderi" src="https://i.stack.imgur.com/qHF2K.png" />
</div>

स्निपेट का विस्तार करें

— Intacto
स्रोत