Ionic: Wie zentriert man ein Div?

DIE SITUATION:

Ich mache eine App mit Ionisches Gerüst. Auf einer Seite muss ich ein Bild anzeigen. Dieses Bild muss horizontal zentriert sein.

VERSUCH 1:

Im Anschluss an die Dokumentation Ich habe eine Zeile in drei gleiche Spalten geteilt und das Bild in die zweite eingefügt.

 <div class="row">
    <div class="col col-33"></div>
    <div class="col col-33">
        <img src="https://stackoverflow.com/questions/31050832/{{ data.logo }}" alt="">
    </div>
    <div class="col col-33"></div>
 </div>

Aber leider ist das Bild bei weitem nicht zentriert. Bleiben Sie in der Regel in der linken Hälfte des Bildschirms.

VERSUCH 2:

Versuchen Sie es mit einigen alten CSS-Tricks.

<div style="margin: 0 auto;">
    <img src="https://stackoverflow.com/questions/31050832/{{ data.logo }}" alt="" >
</div>

Aber wieder bekomme ich nicht das gewünschte Ergebnis.

DIE FRAGE:

Wie kann ich ein div im Ionic-Framework zentrieren?

Sie haben Ihre Antwort bereits gefunden, aber ich würde stattdessen so etwas tun:

In deinem CSS:

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

Und dann fügen Sie einfach diese Klasse zu Ihrem Bild hinzu:

 <img src="https://stackoverflow.com/questions/31050832/{{ data.logo }}" class="center" alt="">

Auf diese Weise müssen Sie nicht jedes Bild einzeln anpassen, und ich finde das sehr anschaulich, wenn Sie sich den HTML-Code ansehen. Außerdem ist es nicht auf eine bestimmte Bildgröße beschränkt.

Im Ionengerüst 2 Sie könnten jetzt die verwenden Attributdirektiven center und text-center dafür.

<ion-row>
  <ion-col text-center>
    <a href="#">My centered text</a>
  </ion-col>
</ion-row>

Ihr 2. Versuch funktioniert, wenn Sie die hinzufügen width Stil. Die Breite sollte der Breite des Bildes entsprechen.

<div style="margin: 0 auto; width:100px">
    <img src="https://stackoverflow.com/questions/31050832/{{ data.logo }}" alt="" >
</div>

Das sollte funktionieren, einfach hinzufügen col-centerKlasse:

<div class="row">
   <div class="col col-33"></div>
   <div class="col col-33 col-center">
      <img src="https://stackoverflow.com/questions/31050832/{{ data.logo }}" alt="">
   </div>
   <div class="col col-33"></div>
</div>

Einfach:

<div align="center">
    <img style="height:100px;width:100px" src="https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png" />
</div>

Um ein Div-Zentrum auszurichten, ist Rand 0 automatisch immer noch die beste Option, aber dafür müssen Sie dem Div einen angemessenen Platz geben, um den mittleren Abschnitt davon zu finden, und deshalb müssen Sie ihm etwas davon geben.

Zusammen mit margin 0 auto Geben Sie auch eine angemessene Breite an, damit Ihr div eine zentrale Position finden kann.