Center image using text-align center?

Question

Is the property text-align: center; a good way to center an image using CSS?

img {
    text-align: center;
}

Answer 1

That doesn't always work... if it doesn't, try:

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

Answer 2

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

Answer 3

Another way of doing it would be centering an enclosing paragraph:

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

Answer 4

.img-container {
  display: flex;
}

img {
  margin: auto;
}

this will make the image center in both vertically and horizontally

Answer 5

You can do:

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

Answer 6

I discovered that if I have an image and some text inside a div, then I can use text-align:center to align the text and the image in one swoop.

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