Bild mit Textmitte zentrieren?

Ist die Eigenschaft text-align: center;eine gute Möglichkeit, ein Bild mithilfe von CSS zu zentrieren?

img {
    text-align: center;
}

Dies funktioniert nicht, da die text-alignEigenschaft für Blockcontainer und nicht für Inline-Elemente gilt und imgein Inline-Element ist. Siehe die W3C-Spezifikation .

Verwenden Sie stattdessen Folgendes:

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>

Das funktioniert nicht immer ... wenn nicht, versuchen Sie:

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

Ich bin auf diesen Beitrag gestoßen und er hat bei mir funktioniert:

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>

(Vertikale und horizontale Ausrichtung)

Eine andere Möglichkeit wäre, einen einschließenden Absatz zu zentrieren:

<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>

Du kannst tun:

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

Tatsächlich besteht das einzige Problem mit Ihrem Code darin, dass das text-alignAttribut für Text (ja, Bilder zählen als Text) innerhalb des Tags gilt. Sie möchten ein spanTag um das Bild setzen und seinen Stil wie folgt festlegen text-align: center:

span.centerImage {
     text-align: center;
}

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

Das Bild wird zentriert. Als Antwort auf Ihre Frage ist dies die einfachste und narrensicherste Methode, um Bilder zu zentrieren, solange Sie daran denken, die Regel auf das Bild span(oder div) des Bildes anzuwenden .

Es gibt drei Methoden zum Zentrieren eines Elements, die ich vorschlagen kann:

1. Verwenden der text-alignEigenschaft

       .parent {
       text-align: center;
   }

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

   Führen Sie das Code-Snippet ausErgebnisse ausblenden

   Erweitern Sie das Snippet

2. Verwenden der marginEigenschaft

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

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

   Führen Sie das Code-Snippet ausErgebnisse ausblenden

   Erweitern Sie das Snippet

3. Verwenden der positionEigenschaft

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

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

   Führen Sie das Code-Snippet ausErgebnisse ausblenden

   Erweitern Sie das Snippet

Die erste und die zweite Methode funktionieren nur, wenn das übergeordnete Element mindestens so breit wie das Bild ist. Wenn das Bild breiter als das übergeordnete Bild ist, bleibt das Bild nicht zentriert !!!

Aber: Die dritte Methode ist ein guter Weg dafür!

Hier ist ein Beispiel:

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>

Nur wenn Sie alte Versionen von Internet Explorer unterstützen müssen.

Der moderne Ansatz ist margin: 0 autoin Ihrem CSS zu tun .

Beispiel hier: 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>

CSS:

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

Das einzige Problem hierbei ist, dass die Breite des Absatzes mit der Breite des Bildes übereinstimmen muss . Wenn Sie dem Absatz keine Breite hinzufügen, funktioniert dies nicht, da 100% davon angenommen werden und Ihr Bild nach links ausgerichtet wird, es sei denn, Sie verwenden es text-align:center.

Probieren Sie die Geige aus und experimentieren Sie damit, wenn Sie möchten.

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

Wenn Sie eine Klasse mit einem Bild verwenden, reicht Folgendes aus

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

Wenn es sich nur um ein Bild in einer bestimmten Klasse handelt, das Sie zentrieren möchten, reicht Folgendes aus:

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

Auf dem Container mit dem Bild können Sie eine CSS 3- Flexbox verwenden, um das Bild sowohl vertikal als auch horizontal perfekt zu zentrieren .

Angenommen, Sie haben <div class = "container"> als Bildhalter:

Dann müssen Sie als CSS Folgendes verwenden:

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

Und dies wird all Ihre Inhalte in diesem Div perfekt zentrieren.

Die einfachste Lösung, die ich gefunden habe, war, dies meinem img-Element hinzuzufügen:

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

Es scheint, dass ich nicht "0" vor dem "Auto" hinzufügen muss, wie von anderen vorgeschlagen. Vielleicht ist das der richtige Weg, aber es funktioniert gut genug für meine Zwecke auch ohne die "0". Zumindest auf den neuesten Versionen von Firefox, Chrome und Edge .

Einfach die Elternausrichtung ändern :)

Versuchen Sie dies in den übergeordneten Eigenschaften:

text-align:center

Sie können text-align: centerdas übergeordnete Element verwenden und das imgin display: inline-block→ ändern. Es verhält sich daher wie ein Textelement und wird zentriert, wenn das übergeordnete Element eine Breite hat!

img {
    display: inline-block
}

Ich würde ein div verwenden, um ein Bild zentriert auszurichten. Wie in:

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

Wenn Sie das Bild als Hintergrund festlegen möchten, habe ich eine Lösung:

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

Das Zentrieren eines Nicht-Hintergrundbilds hängt davon ab, ob Sie das Bild als Inline- (Standardverhalten) oder Blockelement anzeigen möchten.

Fall von Inline

Wenn Sie das Standardverhalten der Anzeige-CSS-Eigenschaft des Bildes beibehalten möchten, müssen Sie Ihr Bild in ein anderes Blockelement einschließen, auf das Sie festlegen müssen text-align: center;

Fall von Block

Wenn Sie das Bild als eigenes Blockelement betrachten möchten, macht die text-alignEigenschaft keinen Sinn, und Sie sollten stattdessen Folgendes tun:

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

Die Antwort auf Ihre Frage:

Ist die Eigenschaft text-align: center; eine gute Möglichkeit, ein Bild mit CSS zu zentrieren?

Ja und nein.

• Ja, wenn das Bild das einzige Element in seinem Wrapper ist.
• Nein, falls sich andere Elemente im Wrapper des Bildes befinden, da alle untergeordneten Elemente, die Geschwister des Bildes sind, die text-alignEigenschaft erben. Möglicherweise möchten Sie diesen Nebeneffekt nicht.

Verweise

1. Liste der Inline-Elemente
2. Dinge zentrieren

Eine weitere Möglichkeit zur Skalierung - Anzeige:

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 */
}

Verwenden Sie dies für Ihr imgCSS:

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

display: blockmit margin: 0hat bei mir nicht funktioniert, auch nicht mit einem text-align: centerElement umwickelt .

Das ist meine Lösung:

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

translateX wird von den meisten Browsern unterstützt

Ich habe festgestellt, dass ich ein Bild und einen Text in einem verwenden divkanntext-align:center den Text und das Bild auf einen Schlag ausrichten .

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>

CSS:

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

CodePen: https://codepen.io/artforlife/pen/MoBzrL?editors=1100

Manchmal fügen wir den Inhalt und die Bilder direkt dem WordPress-Administrator innerhalb der Seiten hinzu. Wenn wir die Bilder in den Inhalt einfügen und diese Mitte ausrichten möchten. Der Code wird angezeigt als:

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

In diesem Fall können Sie CSS-Inhalte wie folgt hinzufügen:

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

Verwenden:

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

Ich denke, dies ist der Weg, um ein Bild im Laravel-Framework zu zentrieren.

.img-container {
  display: flex;
}

img {
  margin: auto;
}

Dadurch wird das Bild sowohl vertikal als auch horizontal zentriert