केंद्र छवि क्षैतिज रूप से एक div के भीतर

Question

यह शायद एक बेवकूफी भरा सवाल है लेकिन चूंकि छवि संरेखित करने के सामान्य तरीके काम नहीं कर रहे हैं, इसलिए मुझे लगा कि मैं पूछूंगा। मैं अपने कंटेनर डिव के अंदर एक छवि (क्षैतिज रूप से) को कैसे संरेखित कर सकता हूं?

यहाँ HTML और CSS है। मैंने थंबनेल के अन्य तत्वों के लिए CSS भी शामिल किया है। यह अवरोही क्रम में चलता है इसलिए उच्चतम तत्व हर चीज का कंटेनर है और सबसे कम हर चीज के अंदर है।

#thumbnailwrapper {
      color: #2A2A2A;
      margin-right: 5px;
      border-radius: 0.2em;
      margin-bottom: 5px;
      background-color: #E9F7FE;
      padding: 5px;
      border: thin solid #DADADA;
      font-size: 15px
}
    
#artiststhumbnail {
      width: 120px;
      height: 108px;
      overflow: hidden;
      border: thin solid #DADADA;
      background-color: white;
}
    
#artiststhumbnail:hover {
      left: 50px
}

<!--link here-->

<a href="NotByDesign">
  <div id="thumbnailwrapper">

    <a href="NotByDesign">

      <!--name here-->
      <b>Not By Design</b>
      <br>

      <div id="artiststhumbnail">

        <a href="NotByDesign">

          <!--image here-->
          <img src="../files/noprofile.jpg" height="100%" alt="Not By Design" border="1" />
        </a>
      </div>

      <div id="genre">Punk</div>

  </div>

ठीक है, मैंने PHP के बिना मार्कअप जोड़ दिया है ताकि देखने में आसानी हो। न तो समाधान व्यवहार में काम करने लगता है। ऊपर और नीचे का पाठ केंद्रित नहीं हो सकता है और छवि को उसके कंटेनर div के भीतर केंद्रित किया जाना चाहिए। कंटेनर में अतिप्रवाह छिपा हुआ है इसलिए मैं छवि का केंद्र देखना चाहता हूं क्योंकि यह सामान्य रूप से जहां फोकस है।

Comments

क्या यह इरादा है कि छवि को पहले लिंक (आर्टिकलर वन) के समान लाइन पर प्रदर्शित किया जाता है?

— शोएब

imgके अधीन हैं text-align: centerजब तक कि उनके displayसंशोधित नहीं किया गया है।

— जारेड फरिश

jsfiddle.net/cEgRp - simpletext-align: center

— Zoltan Toth

याकूब, क्या आप कम से कम उस वास्तविक मार्कअप को पोस्ट कर सकते हैं जिसे ब्राउज़र देखता है और न कि PHP-infused टेम्पलेट? इसके अलावा, एक कामकाजी jsfiddle.net हमेशा मदद करता है।

— जारेड फरिश

कभी भी मेरी टिप्पणी पर ध्यान न दें - मैंने नोटिस नहीं किया था कि मैं इसमें imgसंलग्न था a। मैं गूंगा हूँ।

— शोएब

Answer 1

CSS गाइ निम्नलिखित बताती है:

इसलिए, अनुवाद करना, शायद:

#artiststhumbnail a img {
    display:block;
    margin:auto;
}

यहाँ मेरा समाधान है: http://jsfiddle.net/marvo/3k3CC/2/

Comments

मुझे नहीं लगता कि यह एक अच्छा विचार है, और मुझे यह भी विश्वास है कि कुछ कैविएट हैं जैसे margin: autoकि एक निर्दिष्ट चौड़ाई मान वाले तत्व पर निर्भर है।

— जारेड फरिश

मैं अभी भी अपने सीएसएस कौशल में सुधार कर रहा हूं, इसलिए दिलचस्प अध्ययन बिंदु के लिए धन्यवाद। लेकिन इस मामले में, वह कंटेनर पर एक निश्चित चौड़ाई का उपयोग कर रहा है।

— मार्वो

इस संदर्भ में वास्तव में निर्दिष्ट चौड़ाई का क्या अर्थ है? निश्चित रूप से उपयोगी ज्ञान की तरह लगता है।

— शोएब

इस फिडेल को देखें मैंने बनाया ; मुझे यकीन नहीं है कि मुझे क्या सोचना है। आप जो सुझाव दे रहे हैं वह कुछ भी नहीं करेगा, और imgमेरा मानना ​​है कि किसी भी प्रभाव के लिए किसी भी तरह से परिभाषित चौड़ाई की आवश्यकता होगी auto।

— जारेड फरिश

आपने वास्तव में मेरे द्वारा प्रस्तुत समाधान को लागू नहीं किया। दूसरा, एनक्लोजिंग डिव की चौड़ाई 120px है, जो कि छवि की चौड़ाई के समान है, यह देखने के लिए मुश्किल है कि क्या यह वास्तव में छवि को केंद्रित कर रहा है। यहाँ मेरा समाधान है: jsfiddle.net/marvo/3k3CC/2

— Marvo

Answer 2

सीएसएस फ्लेक्सबॉक्सjustify-content: center छवि मूल तत्व के साथ कर सकते हैं । छवि के पहलू अनुपात को संरक्षित करने के लिए, align-self: flex-start;इसे जोड़ें ।

एचटीएमएल

<div class="image-container">
  <img src="http://placehold.it/100x100" />
</div>

सीएसएस

.image-container {
  display: flex;
  justify-content: center;
}

आउटपुट:

body {
  background: lightgray;
}
.image-container {
  width: 200px;
  display: flex;
  justify-content: center;
  margin: 10px;
  padding: 10px;
  /* Material design properties */
  background: #fff;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.image-2 {
  width: 500px;
  align-self: flex-start;  /* to preserve image aspect ratio */
}
.image-3 {
  width: 300px;
  align-self: flex-start;  /* to preserve image aspect ratio */
}

<div class="image-container">
  <img src="http://placehold.it/100x100" />
</div>

<div class="image-container image-2">
  <img src="http://placehold.it/100x100/333" />
</div>

<div class="image-container image-3">
  <img src="http://placehold.it/100x100/666" />
</div>

Comments

जब ब्राउज़र मेरा समर्थन करता है तो उत्कृष्ट समाधान। align-itemsलंबवत केंद्र का भी उपयोग कर सकते हैं । विभिन्न मार्जिन समाधान मेरे लिए काम नहीं करते हैं क्योंकि केंद्रित होने वाले तत्व में चौड़ाई और ऊंचाई की विशेषताएं नहीं हैं।

— मार्क Rochkind 22

मेरे मामले में, div का एक दिया हुआ आकार है (उदाहरण 50px) और यह छवि को 50px पर खींच देगा।

— मैक्स

@ मोम उस मामले में, आप align-selfइस jsfiddle.net/3fgvkurd

— मनोज कुमार

Answer 3

मुझे अभी W3 CSS पेज पर यह समाधान मिला है और इसने मेरी समस्या का जवाब दिया।

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

स्रोत: http://www.w3.org/Style/Examples/007/center.en.html

Comments

मैं max-width: 100%; max-height: 100%;छवि का आकार बदलने के लिए उपयोग कर रहा हूँ अगर स्क्रीन छवि से छोटी है, लेकिन इस मामले में यह केंद्रित नहीं है। उन दो विशेषताओं के साथ कैसे केंद्र में कोई सुझाव लागू किया गया

— एलेक्सी स्ट्रैच

Answer 4

यह भी करना होगा

#imagewrapper {
    text-align:center
}

#imagewrapper img {
    display:inline-block;
    margin:0 5px
}

Comments

क्या आपका मतलब text-align:center;और था margin:0 5px;? मैंने ;

— बजे

चयनकर्ता ब्लॉक में अंतिम संपत्ति के लिए @ jagb अर्धविराम की आवश्यकता नहीं है।

— टायलरएच

@TylerH यह सच है, चयनकर्ता ब्लॉक में अंतिम संपत्ति के लिए अर्धविराम की आवश्यकता नहीं होती है, लेकिन अर्धविराम का उपयोग करना हमेशा सुरक्षित होता है .. क्या होगा यदि मैं एक सीएसएस फ़ाइल लिखता हूं, दूसरा डेवलपर मेरी फाइल को बाद में संपादित करता है, वे अपना कोड जोड़ते हैं (पंक्ति के बाद) लापता अर्धविराम के साथ, लाइन मैंने उस सीएसएस फ़ाइल में पहले लिखी थी) और उनकी ऊंचाई, चौड़ाई या अन्य घोषणा काम नहीं कर रही है (या अभी तक बदतर है, वे ध्यान नहीं देते हैं कि यह काम नहीं कर रहा है)। मैं कहूंगा कि यह अर्धविरामों को छोड़ने के लिए सुरक्षित है। यही कारण है कि मैं अर्धविरामों का उपयोग करता हूं और अर्धविरामों को कभी बाहर नहीं छोड़ता।

— jagb

@jagb यदि कोई अन्य डेवलपर आपकी फ़ाइल को बाद में संपादित करता है, तो वे अर्धविराम में जोड़ देंगे जहाँ आवश्यक हो, या यह कोड लिखने की उनकी समस्या होगी जिसमें त्रुटियाँ हैं। आपकी प्रारंभिक टिप्पणी की प्रतिक्रिया अभी भी है: "सीएसएस में अंतिम पंक्ति पर अर्धविराम एक शैली पसंद है"।

— टाइलर

मैं जगब से सहमत हूँ। इस साइट को अच्छी स्टाइल पसंद को बढ़ावा देना चाहिए। एक अच्छी शैली कोड को पीछे नहीं छोड़ती है जो आसानी से टूट जाती है। प्रत्येक लाइन पर अर्धविराम लगाने से आपकी लागत शायद 1/10 सेकंड के बीच हो सकती है, एक भी लापता अर्धविराम खोजने के लिए डिबगिंग में आपको घंटों लग सकते हैं। यही कारण है कि बड़ी टेक कंपनियां इस पर जोर देती हैं: Google HTML / CSS स्टाइल गाइड - घोषणा स्टॉप

— जॉर्ज पाटशाइडर

Answer 5

एक छवि या किसी भी तत्व को केंद्रित करने के लिए मैंने जो सबसे अच्छी चीज (जो सभी ब्राउज़रों में काम करता है) पाया है, क्षैतिज रूप से एक सीएसएस वर्ग बनाने के लिए और निम्नलिखित मापदंडों को शामिल करना है:

सीएसएस

.center {
    position: relative;          /* where the next element will be automatically positioned */
    display: inline-block;       /* causes element width to shrink to fit content */
    left: 50%;                   /* moves left side of image/element to center of parent element */
    transform: translate(-50%);  /* centers image/element on "left: 50%" position */
}

फिर आप अपने द्वारा बनाए गए CSS वर्ग को अपने टैग पर लागू कर सकते हैं:

एचटीएमएल

<img class="center" src="image.jpg" />

आप निम्नलिखित करके अपने तत्व में CSS को भी इनलाइन कर सकते हैं:

<img style="position: relative; display: inline-block; left: 50%; transform: translate(-50%);" src ="image.jpg" />

... लेकिन मैं CSS इनलाइन लिखने की सिफारिश नहीं करूंगा क्योंकि तब आपको अपने सेंटिंग कोड का उपयोग करके अपने सभी टैग में कई बदलाव करने होंगे यदि आप कभी स्टाइल बदलना चाहते हैं।

Comments

काम किया, लेकिन ब्राउज़र संगतता के लिए, आपको अन्य प्रकार के परिवर्तन का उपयोग करना होगा।

— जे स्मोक

Answer 6

यह वही है जो मैंने किया:

<div style="height: 600px">
   <img src="assets/zzzzz.png" alt="Error" style="max-width: 100%; 
        max-height: 100%; display:block; margin:auto;" />
</div>

जो छवि ऊंचाई को 600px तक सीमित कर देगा और मूल कंटेनर में क्षैतिज-केंद्र (या आकार छोटा होने पर मूल आकार छोटा होगा) को अनुपात बनाए रखेगा।

Answer 7

मैं एक अंग पर बाहर जा रहा हूं और कहता हूं कि निम्नलिखित वह है जो आप बाद में हैं।

ध्यान दें, निम्नलिखित मेरा मानना ​​है कि गलती से प्रश्न में छोड़ दिया गया था (टिप्पणी देखें):

<div id="thumbnailwrapper"> <!-- <<< This opening element -->
    <div id="artiststhumbnail">
...

तो आपको क्या चाहिए:

#artiststhumbnail {
    width:120px;
    height:108px;
    margin: 0 auto; /* <<< This line here. */
    ...
}

http://jsfiddle.net/userdude/XStjX/3/

Comments

हम्म ... मैं शर्त लगाता हूँ कि काम करता है। मैंने IMAGE को अपने समाधान में केंद्रित किया, लेकिन मैं यह देख सकता हूं कि किसी अन्य div के अंदर div-enclosing-the-image को केंद्रित करने के रूप में प्रश्न की व्याख्या कैसे की जा सकती है। किसी भी तरह से, एक ही समाधान।

— मैरवो

व्यवहार में न तो समाधान काम कर रहा है। मैं दोनों समाधान की कोशिश की थी इससे पहले कि यह काम नहीं करेगा। कृपया प्रश्न में संपादित करें

— याकूब विंडसर

Answer 8

क्षैतिज रूप से एक छवि को केंद्र में रखने के लिए, यह काम करता है:

<p style="text-align:center"><img src=""></p>

Comments

हां, लेकिन अगर आप उस बोरिंग सफेद जगह को रोकने के लिए ब्लॉक के रूप में छवि को प्रदर्शित करने की योजना बनाते हैं, तो यह काम नहीं करेगा ...

— डॉ फ्रेड

Answer 9

इसे अपने सीएसएस में जोड़ें:

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

बस एक बाल तत्व को संदर्भित करना जो उस मामले में छवि है।

Comments

यह तब अच्छा होता है जब आप अभी भी शीर्ष मार्जिन तक पहुंच चाहते हैं, .. मार्जिन 0 ऑटो से बेहतर

— longgirltaadaa

Answer 10

बाएँ और दाएँ के लिए एक समान पिक्सेल पैडिंग रखें:

<div id="artiststhumbnail" style="padding-left:ypx;padding-right:ypx">

Answer 11

एक अंदर तस्वीर रखो newDiv। divछवि के समान युक्त की चौड़ाई बनाएं । लागू margin: 0 auto;करने के लिए newDiv। यह divकंटेनर के भीतर केंद्र होना चाहिए ।

Answer 12

स्थिति का उपयोग करें। निम्नलिखित ने मेरे लिए काम किया ... (क्षैतिज और ऊर्ध्वाधर रूप से केंद्रित)

छवि के केंद्र में ज़ूम के साथ (छवि 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;
    }

Answer 13

आप न्यूनतम कोड के साथ फ्लेक्स बॉक्स का उपयोग करके अपनी सामग्री को संरेखित कर सकते हैं

एचटीएमएल

<div class="image-container">
<img src="https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg" width="100px"> 
</div>

सीएसएस

.image-container{
  width:100%;
  background:green;
  display:flex;

.image-container{
  width:100%;
  background:green;
  display:flex;
  justify-content: center;
  align-items:center;
}

<div class="image-container">
<img src="https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg" width="100px"> 
</div>

js फिडल लिंक https://jsfiddle.net/7un6ku2m/

Answer 14

एक div में एक छवि केंद्र

/* standar */
div, .flexbox-div {
  position: relative;
  width: 100%;
  height: 100px;
  margin: 10px;
  background-color: grey;  
}

img {
  border: 3px solid red;
  width: 75px;
  height: 75px;
}
/* || standar */


/* transform */
.transform {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */ 
}
/* || transform */


/* flexbox margin */
.flexbox-div {
  display: -webkit-flex;
  display: flex;
  background-color: lightgrey; 
}

.margin-img {
  margin: auto;
}
/* || flexbox margin */


/* flexbox justify align */
.flexbox-justify {
  justify-content: center;
}

.align-item {
  align-self: center;
}
/* || flexbox justify align */

<h4>Using transform </h4>  
<div>
  <img class="transform" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" />
</div>

<h4>Using flexbox margin</h4>  
<div class="flexbox-div">
  <img class="margin-img" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" />
</div>

<h4>Using flexbox justify align</h4>  
<div class="flexbox-div flexbox-justify">
  <img class="align-item" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" />
</div>

Answer 15

मैंने कुछ तरीके आजमाए हैं। लेकिन यह तरीका मेरे लिए पूरी तरह से काम करता है

<img src="~/images/btn.png" class="img-responsive" id="hide" style="display: block; margin-left: auto; margin-right: auto;" />

Answer 16

एक छवि को केंद्रित करने का एक उत्तरदायी तरीका इस प्रकार हो सकता है:

.center {
    display: block;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
}

Answer 17

यदि आपको यह इनलाइन (जैसे कि इनपुट बॉक्स का उपयोग करते समय) करना है, तो
यहां एक त्वरित हैक है जो मेरे लिए काम करता है:
एक divसाथ अपने (इस मामले में छवि लिंक) को घेरेंstyle="text-align:center"

<div style="text-align:center">

<a title="Example Image: Google Logo" href="https://www.google.com/" 
target="_blank" rel="noopener"><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Google Logo. Click to visit Google.com" border="0" data-recalc-dims="1" /></a>

<h6><strong>This text will also be centered </strong></h6>

</div> /* ends centering style */

Answer 18

##Both Vertically and Horizontally center of the Page
.box{
    width: 300px;
    height: 300px;
    background-color: #232532;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

Comments

Stackoverflow में आपका स्वागत है! कृपया अपने उत्तर में कुछ स्पष्टीकरण जोड़ें।

— मैक्सिमिलियन पीटर्स

यदि हम सभी उपकरणों के लिए पृष्ठ के विशेष रूप से <div> या <section>क्षैतिज रूप से और क्षैतिज रूप से दोनों को ठीक करना चाहते हैं , तो बस आप इस शैली कोड का उपयोग कर सकते हैं !!!!

— शिव कालीमूर्ति

ऐसा लगता है कि यह उत्तर एक अलग प्रश्न से संबंधित है :)

— मनोज कुमार

Answer 19

हाँ, इस तरह कोड ठीक काम करते हैं

<div>
 <img>
</div>

लेकिन सिर्फ यू को याद दिलाने के लिए, छवि के लिए शैली

object-fit : *depend on u*

इसलिए अंतिम कोड उदाहरण की तरह हो

<div style="border: 1px solid red;">
    <img
      src="./assets/images/truck-toy.jpg"
      alt=""
      srcset=""
      style="
       border-radius: 50%;
       height: 7.5rem;
       width: 7.5rem;
       object-fit: contain;"
    />
</div>

Answer 20

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

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

Comments

ओपी ने स्पष्ट रूप से क्षैतिज संरेखण के लिए कहा।

— एल्विन मोयो

Answer 21

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">


      <style>
      body{
  /*-------------------important for fluid images---\/--*/
  overflow-x: hidden; /* some browsers shows it for mysterious reasons to me*/
  overflow-y: scroll;
  margin-left:0px;
  margin-top:0px;
  /*-------------------important for fluid images---/\--*/
      }
      .thirddiv{
      float:left;
      width:100vw;
      height:100vh;
      margin:0px;
      background:olive;
      }
      .thirdclassclassone{
      float:left;   /*important*/
      background:grey;
      width:80vw;
      height:80vh; /*match with img height bellow*/
      margin-left:10vw; /* 100vw minus "width"/2    */
      margin-right:10vw; /* 100vw minus "width"/2   */
      margin-top:10vh;
      }
      .thirdclassclassone img{
      position:relative; /*important*/
     display: block;  /*important*/
    margin-left: auto;  /*very important*/
    margin-right: auto;  /*very important*/
    height:80vh; /*match with parent div above*/

    /*--------------------------------
    margin-top:5vh;
    margin-bottom:5vh;
    ---------------------------------*/
    /*---------------------set margins to match total  height of parent di----------------------------------------*/
      }
    </style>           
</head>  
<body>
    <div class="thirddiv">
       <div class="thirdclassclassone">
       <img src="ireland.png">
    </div>      
</body>
</html>