पाठ-संरेखित केंद्र का उपयोग करके केंद्र की छवि?

Question

क्या संपत्ति text-align: center;सीएसएस का उपयोग करके छवि को केंद्रित करने का एक अच्छा तरीका है?

img {
    text-align: center;
}

Comments

jsfiddle.net/j6q4d810/1 यह किसी भी चौड़ाई और ऊंचाई के साथ ठीक काम करता है

— gmarsi

Answer 1

यह काम नहीं करेगा क्योंकि text-alignसंपत्ति कंटेनरों को ब्लॉक करने के लिए लागू होती है, इनलाइन तत्वों को नहीं, और imgएक इनलाइन तत्व है। W3C विनिर्देश देखें ।

इसके बजाय इसका उपयोग करें:

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

<div style="border: 1px solid black;">
<img class="center" src ="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">

</div>

Comments

मैं इस विधि की कोशिश की और यह काम करता है! लेकिन जब मैंने 2 छवियों की कोशिश की, तो यह काम नहीं किया, यह सिर्फ एक दूसरे के ऊपर एक कुलदेवता की तरह ढेर है, किसी भी विचार कैसे बीच में एक ही पंक्ति पर 2 छवियों को संरेखित करने के लिए?

— पैट्रिकगंबा

यह W3C द्वारा समर्थित कैसे नहीं है? क्या आप दावे के साथ लिंक प्रदान कर सकते हैं?

— का भूत

@SecondRikudo: text-alignजैसा कि नाम का अर्थ है, पाठ को केंद्रित करने के लिए है। ब्लॉक तत्वों के लिए, margin: 0 auto;है सिफारिश की दृष्टिकोण।

— मृकफ

@ चित्र छवियाँ इनलाइन तत्व हैं, ब्लॉक नहीं। text-alignउन पर भी काम करता है।

— मदारा का भूत

यह स्पष्टीकरण अजीब तरह का है न? आप कहते हैं कि 'टेक्स्ट-अलाइन' ब्लॉक पर लागू होता है और इनलाइन पर नहीं, जो मैं मानता हूं, तो आप सचमुच इसे ब्लॉक एलिमेंट में बदल देते हैं। मेरा मतलब है कि आपका कोड काम करता है, लेकिन उस पैराग्राफ को पूरी तरह से पुन: तैयार किया जाना चाहिए, imo।

— ऑक्टोपस

Answer 2

यह हमेशा काम नहीं करता है ... अगर यह कोशिश नहीं करता है:

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

Answer 3

मैं इस पोस्ट पर आया , और इसने मेरे लिए काम किया:

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

<div style="border: 1px solid black; position:relative; min-height: 200px">
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">

</div>

(ऊर्ध्वाधर और क्षैतिज संरेखण)

Answer 4

इसे करने का एक और तरीका एक संलग्न पैराग्राफ केंद्रित होगा:

<p style="text-align:center; border:1px solid black"><img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a"></p>

Comments

मैं असहमत हूं, मुझे लगता है कि यह सवाल का जवाब देता है। ओपी ने पूछा कि संपत्ति text-align: centerछवि को केंद्र में रखने का एक अच्छा तरीका है या नहीं , और यह निर्दिष्ट नहीं किया कि संपत्ति को आईएमजी टैग का एक हिस्सा होना था। यह उत्तर समाधान (कि काम करता है) प्रदान करने के प्रयास में प्रश्न में संपत्ति का उपयोग करता है।

— मैंडम

यह मेरे लिए काम किया जब प्रदर्शन: ब्लॉक, आदि नहीं होगा।

— मैथ्यूशेट्स

Answer 5

तुम कर सकते हो:

<center><img src="..." /></center>

Comments

दुर्भाग्य से, <center>html5 में समर्थित नहीं है, लेकिन लानत है, यह काम करता है।

— Ayrat

Answer 6

दरअसल, आपके कोड की एकमात्र समस्या यह है कि यह text-alignविशेषता टैग के अंदर पाठ (हां, चित्र को पाठ के रूप में गिनती है) पर लागू होती है। आप spanछवि के चारों ओर एक टैग लगाना चाहते हैं और इसकी शैली को इस पर सेट कर सकते हैं text-align: center:

span.centerImage {
     text-align: center;
}

<span class="centerImage"><img src="http://placehold.it/60/60" /></span>

छवि केंद्रित होगी। अपने प्रश्न के जवाब में, यह छवियों को केंद्र में रखने का सबसे आसान और सबसे आसान तरीका है, जब तक आप छवि के युक्त span(या div) पर नियम लागू करना याद करते हैं ।

Comments

एक spanतत्व display: inline;डिफ़ॉल्ट रूप से होता है, इसलिए यह उसी समस्या में चलता है text-align: center;जो imgस्वयं को रखने पर होता है। काम करने के spanलिए आपको display: block;इसे इसके साथ सेट या बदलना होगा div।

— वेब_डिजाइनर

Answer 7

एक तत्व को केंद्रित करने के तीन तरीके हैं जो मैं सुझा सकता हूं:

1. text-alignसंपत्ति का उपयोग करना

       .parent {
       text-align: center;
   }

       <div class="parent">
       <img src="https://placehold.it/60/60" />
   </div>

2. marginसंपत्ति का उपयोग करना

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

   <img src="https://placehold.it/60/60" />

3. positionसंपत्ति का उपयोग करना

   img {
       display: block;
       position: relative;
       left: -50%;
   }
   .parent {
       position: absolute;
       left: 50%;
   }

   <div class="parent">
       <img src="https://placehold.it/60/60" />
   </div>

---

पहली और दूसरी विधियाँ केवल तभी काम करती हैं जब अभिभावक कम से कम चित्र के समान विस्तृत हो। जब छवि अपने माता-पिता से व्यापक होती है, तो छवि केंद्रित नहीं रहेगी !!!

लेकिन: तीसरी विधि उसके लिए एक अच्छा तरीका है!

यहाँ एक उदाहरण है:

img {
    display: block;
    position: relative;
    left: -50%;
}
.parent {
    position: absolute;
    left: 50%;
}

<div class="parent">
    <img src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/img_01.jpg" />
</div>

Comments

# 3 इतना सटीक है कि मैं एक सीएसएस इंजेक्शन के साथ imgएक उचित अंदर एक केंद्र में सक्षम है । धन्यवाद! divWebView

— जोर्जएएमवीएफ

Answer 8

केवल अगर आपको इंटरनेट एक्सप्लोरर के प्राचीन संस्करणों का समर्थन करने की आवश्यकता है।

आधुनिक दृष्टिकोण margin: 0 autoआपके सीएसएस में करना है।

यहाँ उदाहरण: http://jsfiddle.net/bKRMY/

HTML:

<p>Hello the following image is centered</p>
<p class="pic"><img src="https://twimg0-a.akamaihd.net/profile_images/440228301/StackoverflowLogo_reasonably_small.png"/></p>
<p>Did it work?</p>

सीएसएस:

p.pic {
    width: 48px;
    margin: 0 auto;
}

यहां एकमात्र मुद्दा यह है कि पैराग्राफ की चौड़ाई छवि की चौड़ाई के समान होनी चाहिए । यदि आप पैराग्राफ़ पर चौड़ाई नहीं डालते हैं, तो यह काम नहीं करेगा, क्योंकि यह 100% मान लेगा और आपकी छवि को बाईं ओर संरेखित किया जाएगा, जब तक कि आप उपयोग न करेंtext-align:center ।

यदि आप चाहें, तो फिडेल को आज़माएं और उसके साथ प्रयोग करें।

Answer 9

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

Comments

सपना शिकारी, यदि आप सीएसएस का उपयोग करके छवि को केंद्रित करने का एक वैकल्पिक तरीका प्रस्तावित कर रहे हैं, तो आपको अपने प्रश्न को थोड़ा विस्तारित करने की आवश्यकता है। आप यह बता सकते हैं कि यह प्रस्तावित विकल्प प्रश्नकर्ता के लक्ष्य को प्राप्त करने का एक बेहतर तरीका कैसे होगा, शायद संबंधित दस्तावेज के लिए लिंक भी शामिल है। यह उनके लिए अधिक उपयोगी होगा, और अन्य साइट पाठकों के लिए भी अधिक उपयोगी होगा जो समान समस्याओं के समाधान की तलाश कर रहे हैं।

— विंस बॉड्रेन

Answer 10

यदि आप एक छवि के साथ एक वर्ग का उपयोग कर रहे हैं तो निम्नलिखित करेंगे

class {
    display: block;
    margin: 0 auto;
}

यदि यह केवल विशिष्ट वर्ग में एक छवि है जिसे आप केंद्र में संरेखित करना चाहते हैं तो निम्नलिखित कार्य करेंगे:

class img {
    display: block;
    margin: 0 auto;
}

Comments

मैं नीचे एक को बदल देता हूं img.classया एक img.classसंस्करण भी जोड़ देता हूं । इसके लिए Thx।

— चक सेवेज

Answer 11

कंटेनर होल्डिंग छवि पर आप सीएसएस 3 फ्लेक्सबॉक्स का उपयोग पूरी तरह से लंबवत और क्षैतिज रूप से छवि को अंदर करने के लिए कर सकते हैं ।

मान लें कि आपके पास छवि धारक के रूप में <div class = "container"> है:

फिर सीएसएस के रूप में आपको उपयोग करना होगा:

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

और यह इस div के अंदर आपकी सारी सामग्री को पूरी तरह से केंद्रित कर देगा।

Comments

व्हाट्सएप-कंटेंट सेट एलाइन में <p> के लिए उपयोग कर सकते हैं ??

— मंजीत ताशेरा

मुझे यही चाहिए था। धन्यवाद।

— डायोन किम

Answer 12

सबसे सरल समाधान जो मुझे मिला, वह था कि मैं अपने img- तत्व में शामिल हो जाऊं:

style="display:block;margin:auto;"

ऐसा लगता है कि मुझे "ऑटो" से पहले "0" जोड़ने की आवश्यकता नहीं है जैसा कि दूसरों द्वारा सुझाया गया है। हो सकता है कि यह उचित तरीका है, लेकिन यह "0" के बिना भी मेरे उद्देश्यों के लिए पर्याप्त रूप से अच्छी तरह से काम करता है। कम से कम नवीनतम फ़ायरफ़ॉक्स, क्रोम, और एज पर ।

Comments

केवल ऑटो का मतलब auto auto auto autoऔर 0 autoमतलब है 0 auto 0 auto... और नीचे और ऊपर के मार्जिन के लिए डिफ़ॉल्ट ऑटो है, 0इसलिए 0 जोड़ रहा है या नहीं इस मामले में बिल्कुल वैसा ही है, जो आपको पहले से उपलब्ध कराए गए लोगों के उत्तर-डुप्लिकेट का जवाब देता है

— Temani Afif

आपकी टिप्पणी बताती है कि यह क्यों काम करता है। महान। लेकिन पिछले उत्तरों में से किसने '0' के बिना सादे 'ऑटो' के रूप में अच्छी तरह से काम करता है? क्या यह तथ्य ध्यान देने योग्य नहीं है?

— पानू लॉजिक

इस मामले में यह एक टिप्पणी होनी चाहिए, क्योंकि इस विशेष मामले में दोनों समान हैं। मुझे नहीं लगता कि हम सब बराबर मान, इस मामले हम लिख सकते हैं के लिए एक जवाब होना चाहिए है: auto, auto auto, auto auto auto, auto auto auto auto, 0 auto 0, 0 auto, 0 auto 0 auto, और इतने पर ... आपको लगता है हर एक को एक अलग जवाब के लायक? मुझे ऐसा नहीं लगता।

— तैमनी अफिफ

मैं यह नहीं कहूंगा कि अगर सीएसएस के दो अलग-अलग सेगमेंट एक ही अंतिम परिणाम देते हैं, तो वे दो सीएसएस-सेगमेंट "समान हैं"। उनका आउटपुट समान है लेकिन उनका सोर्स-कोड समान नहीं है। बस सामान्य तौर पर आप किसी भी संख्या में विभिन्न प्रोग्राम लिख सकते हैं जो एक ही आउटपुट का उत्पादन करते हैं। फिर यह जानना (और लोगों को बताने वाले लोगों के लिए) मूल्यवान है कि इस तरह के "समकक्ष" कार्यक्रमों में से कौन सा लिखना सबसे सरल और कम लगता है।

— पानू लॉजिक

और यह सब एक उत्तर में लिखा जाना चाहिए। इसलिए यह उत्तर एक पूरे नए उत्तर की तुलना में टिप्पणी के रूप में अधिक उपयुक्त है। हमें सभी समतुल्य चीजों को एक साथ प्रस्तुत करना चाहिए और उन्हें अलग विशेषता नहीं बनानी चाहिए जिससे यह लग सकता है कि वे पूरी तरह से अलग हैं क्योंकि ऐसा नहीं है [मेरी राय btw, इससे सहमत होने या इसके विपरीत तर्क देने की आवश्यकता नहीं है]। और मैं विभिन्न कार्यक्रमों के बारे में बात नहीं कर रहा हूं जो एक ही आउटपुट का उत्पादन करते हैं, यह पूरी तरह से अलग बात है क्योंकि तर्क समान नहीं हो सकता है। यहां हम एक ही संपत्ति और एक ही मूल्य (जैसे i++के समान हैं i+=1) के बारे में बात कर रहे हैं

— तैमनी Afif

Answer 13

बस माता-पिता संरेखित करें :)

मूल गुणों पर इसे आज़माएं:

text-align:center

Answer 14

आप उपयोग कर सकते हैं text-align: centerमाता-पिता पर और परिवर्तन imgकरने के लिए display: inline-block→ यह इसलिए एक पाठ-तत्व की तरह बर्ताव करता है और यदि माता-पिता एक चौड़ाई है केंद्रित किया जाएगा है!

img {
    display: inline-block
}

Answer 15

मैं एक छवि को संरेखित करने के लिए div का उपयोग करूंगा। जैसे की:

<div align="center"><img src="your_image_source"/></div>

Answer 16

यदि आप छवि को पृष्ठभूमि के रूप में सेट करना चाहते हैं, तो मुझे एक समाधान मिला है:

.image {
    background-image: url(yourimage.jpg);
    background-position: center;
}

Answer 17

एक गैर पृष्ठभूमि छवि को केंद्र में रखना इस बात पर निर्भर करता है कि आप छवि को इनलाइन (डिफ़ॉल्ट व्यवहार) या ब्लॉक तत्व के रूप में प्रदर्शित करना चाहते हैं या नहीं।

इनलाइन का मामला

यदि आप छवि की प्रदर्शन CSS संपत्ति के डिफ़ॉल्ट व्यवहार को बनाए रखना चाहते हैं, तो आपको अपनी छवि को किसी अन्य ब्लॉक तत्व के अंदर लपेटना होगा, जिस पर आप सेट हैं text-align: center;

ब्लॉक का मामला

यदि आप छवि को स्वयं के ब्लॉक तत्व के रूप में मानना ​​चाहते हैं, तो text-alignसंपत्ति का कोई मतलब नहीं है, और आपको इसके बजाय ऐसा करना चाहिए:

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

आपके प्रश्न का उत्तर:

संपत्ति पाठ-संरेखित है: केंद्र; CSS का उपयोग करके छवि को केंद्र में रखने का एक अच्छा तरीका है?

हां और ना।

• हां, यदि छवि इसके आवरण के अंदर एकमात्र तत्व है।
• नहीं, यदि आपके पास छवि के आवरण के अंदर अन्य तत्व हैं, क्योंकि सभी बच्चे तत्व जो छवि के भाई बहन हैं, उन्हें text-alignसंपत्ति विरासत में मिलेगी : और हो सकता है कि आप इस दुष्प्रभाव को पसंद नहीं करेंगे।

संदर्भ

1. इनलाइन तत्वों की सूची
2. चीजों को केंद्रित करना

Answer 18

पैमाने पर एक और तरीका - इसे प्रदर्शित करें:

img {
  width: 60%; /* Or required size of image. */
  margin-left: 20% /* Or scale it to move image. */
  margin-right: 20% /* It doesn't matters much if using left and width */
}

Answer 19

अपने imgसीएसएस में इसका प्रयोग करें :

img {
  margin-right: auto;
  margin-left: auto;
}

Answer 20

display: blockमेरे साथ margin: 0काम नहीं किया, न ही एक के साथ लपेटकरtext-align: center तत्व।

यह मेरा समाधान है:

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

translateX अधिकांश ब्राउज़रों द्वारा समर्थित है

Comments

क्या आपका मतलब था margin: 0 auto;? कुंजी सेटिंग है margin-leftऔर margin-rightकरने के लिए auto। margin: 0 auto;उसके लिए सिर्फ एक शॉर्टकट है।

— वेब_डिजाइनर

@Web_Designer मैंने कोशिश की margin: 0 auto, margin: 0और margin: auto, कोई भी काम नहीं किया। ध्यान दें कि क्रोम के इंस्पेक्टर, का उपयोग करते समय margin: 0 auto, एक विस्मयादिबोधक चिह्न के साथ संपत्ति पर हमला invalid property value

— बोल

मुझे लगता है कि आपका मतलब "स्थिति: पूर्ण;" इसके बजाय "प्रदर्शन: पूर्ण;"

— WebDevDaniel

टाइपो को इंगित करने के लिए धन्यवाद @WebDevDaniel। ओह किसी भी तरह से, आप relativeइसके बजाय स्थिति का उपयोग करना चाह सकते हैं absolute, दोनों बहुत अच्छी तरह से काम करते हैं।

— ओवरकोडर

Answer 21

मुझे पता चला कि अगर मेरे अंदर एक छवि और कुछ पाठ है div, तो मैं text-align:centerएक झपट्टा में पाठ और छवि को संरेखित करने के लिए उपयोग कर सकता हूं ।

HTML:

    <div class="picture-group">
        <h2 class="picture-title">Picture #1</h2>
        <img src="http://lorempixel.com/99/100/" alt="" class="picture-img" />
        <p class="picture-caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus sapiente fuga, quia?</p>
    </div>

सीएसएस:

.picture-group {
  border: 1px solid black;
  width: 25%;
  float: left;
  height: 300px;
  #overflow:scroll;
  padding: 5px;
  text-align:center;
}

कोडपैन: https://codepen.io/artforlife/pen/MoBzrL?editors=1100

Answer 22

कभी-कभी हम सीधे पेज के अंदर वर्डप्रेस व्यवस्थापक पर सामग्री और चित्र जोड़ते हैं। जब हम छवियों को सामग्री के अंदर सम्मिलित करते हैं और उस केंद्र को संरेखित करना चाहते हैं। कोड के रूप में प्रदर्शित किया जाता है:

 **<p><img src="https://abcxyz.com/demo/wp-content/uploads/2018/04/1.jpg" alt=""></p>**

उस स्थिति में आप इस तरह सीएसएस सामग्री जोड़ सकते हैं:

article p img{
    margin: 0 auto;
    display: block;
    text-align: center;
    float: none;
}

Answer 23

उपयोग:

<dev class="col-sm-8" style="text-align: center;"><img src="{{URL('image/car-trouble-with-clipping-path.jpg')}}" ></dev>

मुझे लगता है कि यह लारवेल ढांचे में एक छवि को केंद्रित करने का तरीका है।

Answer 24

.img-container {
  display: flex;
}

img {
  margin: auto;
}

यह छवि को लंबवत और क्षैतिज दोनों में बनाएगा