Bild zentrieren mit text-align center?

Question

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

img {
    text-align: center;
}

Answer 1

Das können Sie tun:

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

Answer 2

Es gibt drei Methoden zur Zentrierung eines Elements, die ich vorschlagen kann:

1. Die Verwendung des text-align Eigenschaft

       .parent {
       text-align: center;
   }
   
       <div class="parent">
       <img src="https://placehold.it/60/60" />
   </div>

2. Die Verwendung des margin Eigenschaft

   img {
       display: block;
       margin: 0 auto;
   }
   
   <img src="https://placehold.it/60/60" />

3. Die Verwendung des position Eigenschaft

   img {
       display: block;
       position: relative;
       left: -50%;
   }
   .parent {
       position: absolute;
       left: 50%;
   }
   
   <div class="parent">
       <img src="https://placehold.it/60/60" />
   </div>

---

Die erste und zweite Methode funktionieren nur, wenn das übergeordnete Element mindestens so breit ist wie das Bild. Wenn das Bild breiter als das übergeordnete Element 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>

Answer 3

Auf dem Container mit dem Bild können Sie ein CSS 3 Flexbox um das Bild im Inneren sowohl vertikal als auch horizontal perfekt zu zentrieren.

Nehmen wir an, Sie haben <div class="container"> als Bildhalter:

Dann müssen Sie als CSS verwenden:

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

Dadurch wird Ihr gesamter Inhalt in diesem Div perfekt zentriert.

Answer 4

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

Der moderne Ansatz besteht darin, Folgendes zu tun margin: 0 auto in Ihrem CSS.

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 dabei ist, dass die Breite des Absatzes muss mit der Breite des Bildes übereinstimmen . Wenn Sie keine Breite für den Absatz angeben, wird es nicht funktionieren, weil es von 100% ausgeht und Ihr Bild links ausgerichtet wird, es sei denn, Sie verwenden text-align:center .

Probieren Sie die Fiedel aus und experimentieren Sie damit, wenn Sie mögen.

Answer 5

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