CSS zum Ausrichten des Bildes in der Mitte

Ich habe ein Bild in einem Widget in meinem WordPress-Blog platziert. Ich möchte, dass das Bild zentriert wird, da es kleiner ist als die Seitenleiste, in der es platziert ist.

Aktuell verwende ich folgenden Code:

<img style="display: block; margin-left: auto; margin-right: auto; padding-bottom: 10px; width: 150px; height: 155px;" src="https://stackoverflow.com/questions/33387740/path">

Aber das Bild wird linksbündig ausgerichtet.

Was mache ich falsch?

Danke vielmals!

Versuchen margin: 0 auto anstatt sie separat zu deklarieren. Sie können auch versuchen, hinzuzufügen text-align: center zu seinem Container oder übergeordneten div

Ich gebe Ihnen zwei Lösungen

1. Sie müssen dem übergeordneten div-Tag width: wie erforderlich geben, dh 75 % bis 100 %. Schreiben Sie CSS für das img-Tag: margin-left:250px oder mehr.

2. Fügen Sie unten CSS für das Bild hinzu position relative; margin-left: 250px oder mehr;

Viel Glück

Verwenden text-align: center; auf Ihrem div, das das Bild enthält:

.siteorigin-widget-tinymce.textwidget{
  text-align: center;
}

Weil jeder die Antworten mit etwas Ähnlichem hinzugefügt hat. Ich beschloss, dies mit allen zu teilen. Sie können diese Lösung für das Bild in der Mitte für beide verwenden x (horizontal) und y (vertical) Achse denn das sagt der Titel der Frage. Das setzt sich fort flexbox.

<div id="imageBox">
  <img src="https://stackoverflow.com/questions/33387740/my-image.png" alt="some text" />
</div>

Verwenden flexbox

#imageBox
{
    display:flex;
    flex-direction:column;
    justify-content:center; 
    width: 400px;
    height: 400px;
}

#imageBox img
{
    margin: 0 auto;  /* this is where magic will happen!! */
}

Hier ist der DEMO des obigen Ansatzes.

Wenn Sie zentrieren möchten nur horizontal verwenden flexbox Lassen Sie einfach Stile für weg img und folgendes einstellen.

#imageBox
{
    display: flex;
    flex-direction: row;  /* changed from column to row  */
    justify-content: center;
}

Beachten Sie, dass ich mich geändert habe flex-direction Eigentum aus column zu row was standardmäßig ist. Wenn Sie nichts angeben, funktioniert es trotzdem. Einstellen auf column wird es vertikal zentrieren.

Bei der Arbeit mit flexbox sollten einige Dinge beachtet werden.

• flexbox wird in älteren IE-Versionen nicht unterstützt dh IE < 11 und hat eingeschränkte Unterstützung für IE-10.
• Der übergeordnete Container (#imgBox in diesem Fall) sollte eine gewisse Höhe und Breite haben, sonst wird das Bild nicht in einer der Achsen zentriert. Dies ist auch erforderlich, damit margin: 0 auto funktioniert, dh ohne etwas zu haben width (nicht in Prozent), die margin: 0 auto Eigenschaft wird nicht funktionieren CSS.

Alternativer Ansatz:

Wenn Sie sich doch auf Flexbox verlassen wollen, dann ist das wiederum nicht allzu schwierig. Bilder sind inline in der Natur auf Webseiten, aber sie können immer noch haben width und height damit sie horizontal zentriert werden können text-align Eigenschaft dh mit dem obigen Beispiel …

#imageBox 
{
    text-align: center;
}

Es wird jedoch nicht zentriert img vertikal. Vertical-align allein wird das Bild in diesem Fall nicht vertikal zentrieren. Dazu können Sie diesen Beitrag hier überprüfen. Da ist es schön erklärt.

Sie können auch verwenden display: table und display: table-cell und bewerben text-align: center und vertical-align: middle an table-cell um den Inhalt auf beiden Achsen zu zentrieren, aber ich würde diese nicht empfehlen, es sei denn, es ist wirklich notwendig.

Angenommen, Sie haben das richtige WP-spezifische CSS in Ihrem untergeordneten Thema, versuchen Sie Folgendes:

<img src="https://stackoverflow.com/questions/33387740/path_to_image_copied_from_media_library" alt="an_alt_label" width="150" height="150" class="aligncenter size-thumbnail" />

size-thumbnail ermöglicht es Ihnen, die Standardstile für das registrierte Bild in Miniaturgröße zu verwenden. Wenn Sie anfangen, CSS-Regeln für einzelne Bilder hinzuzufügen, neigen Sie dazu, die Einheitlichkeit des Stils für die gesamte Website durcheinander zu bringen.

Geben Sie hier die Bildbeschreibung ein

<div id="imageBoxColor">
  <img src="./car.jpg" alt="some text" />
</div>

      #imageBoxColor{
     height: 100vh;
     background-color: rgb(198, 203, 202);
     display: flex;
     justify-content: center;
     align-items: center;
  }

  #imageBoxColor img{
     width: 400px;
     height: 400px;   
  }

Folgen Sie diesem Code, um die Bildmitte auszurichten. Ich hoffe, Ihr Problem ist gelöst