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

Ich habe entdeckt, dass ich, wenn ich ein Bild und einen Text innerhalb einer div verwenden, dann kann ich text-align:center um den Text und das Bild auf einen Schlag auszurichten.

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

Answer 2

display: block con margin: 0 hat bei mir nicht funktioniert, ebenso wenig wie das Einwickeln mit einem text-align: center élément.

Das ist meine Lösung:

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

translateX wird von den meisten Browsern unterstützt