Center image not working?

Question

I'm probably turning mad but I really cannot seem to find out what I'm doing wrong. I'm simply trying to center my image.

<div class="container ">
    <img src="design/images/logo.png" alt="logo" class="logo" />
    <div class="contactData">
        data
    </div>
</div>

This is my CSS:

.container {
    max-width: 978px;
    width: calc(100% - 46px);
    height: 300px;
    margin: 0 auto;
    padding-left: 23px;
    padding-right: 23px;

.logo {
        width: 337px;
        height: 76px;
        margin: 0 auto;
        float: none;
    }

 .contactData {
        max-width: 206px;
        margin: 30px auto 0 auto;
        text-align: center;
        float: none;
  }

The contactData div just centers fine but the image doesn't.

Answer 1

add display:block; in your .logo

That should probably fix it

Answer 2

Use either display: block; or display: inline-block; while you are using margin: auto; for the images.

.logo {
    width: 337px;
    height: 76px;
    margin: 0 auto;
    float: none;
    display: block;
}

Images are inline by default and you need to trigger hasLayout or something similar.

Answer 3

add this code

.container {
    max-width: 978px;
    width: calc(100% - 46px);
    height: 300px;
    margin: 0 auto;
    padding-left: 23px;
    padding-right: 23px;
  text-align: center;
  vertical-align: middle;

Answer 4

You are not specifying any aligning for image. In the container class, Just give

text-align:center;

Answer 5

In .logo just add display:block; in your CSS.