Centering an image in div

Question

I want to put the image in the center of the div.

My div:

width: 95%;
padding: 2.5%;
max-width: 1200px;
height:100%;

but I can not put image in the center and responsive.

I had 50% of img and putting 25% of padding. But I want to use picture and recommended not to use text-align and

display: block; margin: 0 auto;

not function , does anyone know what to do?

Welcome to Stack Overflow! Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) — Paulie_D, Sep 21 '16 at 14:09

score 0 · Answer 1 · answered Sep 21 '16 at 14:21

0

Use text-align: center for parent <div> and display: inline-block for image

#parent {
  text-align: center;
}
img {
  display: inline-block;
}

#parent {
  text-align: center;
}
img {
  display: inline-block;
}

<div id="parent">
   <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR2kHE1B9lVRicrWWdui_B309y9cd-YOmwgAxxWmNy27b6ArKvWXA">
</div>

answered Sep 21 '16 at 14:21

`display: inline-block` is not really necessary since images are inline by default. – Aziz Sep 21 '16 at 15:47

1 Answers1