-1

How, do I get the images to center left and right?

Have tried a few different things but nothing want to work with this...

CSS: (not working)

body,html {
    margin: 0px;
    padding: 0px;
    height: 100%;
    width: 100%;
}

img {
    float: left;
    max-height: 100%;
    max-width: 100%;
    width:auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

jsfiddle DEMO

Mardzis
  • 760
  • 1
  • 8
  • 21
Patrik Fröhler
  • 1,221
  • 1
  • 11
  • 38
  • possible duplicate of [How to make an image center (vertically & horizontally) inside a bigger div](http://stackoverflow.com/questions/388180/how-to-make-an-image-center-vertically-horizontally-inside-a-bigger-div) and a multitude of others. – Rob Jan 04 '15 at 15:22
  • None of the answers explain why the CSS doesn't work. It's all "do this" and "do that." – unbindall Jan 04 '15 at 15:32

5 Answers5

3

Delete your float: left;, margin and insert margin: 0 auto;.

Mardzis
  • 760
  • 1
  • 8
  • 21
1

You also can set display:inline-block; to img and add text-align:center; to the parents. Also set height:auto; to keep responsive behaviour. See the fiddle below for all modifies i would do : http://jsfiddle.net/5q7jrwha/2/

stefanz
  • 1,316
  • 13
  • 23
0

http://jsfiddle.net/sq6xwfcy/

body, html {
    margin: 0px;
    padding: 0px;
    height: 100%;
    width: 100%;
}
img {
    max-height: 100%;
    max-width: 100%;
    display: block;
    margin: 0 auto;
}
Mardzis
  • 760
  • 1
  • 8
  • 21
tom10271
  • 4,222
  • 5
  • 33
  • 62
0

you can use this:

img {
   max-height: 100%;
   max-width: 100%;
   width:auto;
   display: block;
   margin: 0 auto;
}

fiddle

Nitsan Baleli
  • 5,393
  • 3
  • 30
  • 52
0

Delete max-height: 100%; max-width: 100%; or width:auto; or use max-size in pixels height: ""px; width: ""px; Delete float: left; margin-left: auto; margin-right: auto; use margin: 0 auto;

Коракес
  • 1
  • 1