CODEWITHSUNDEEP
htmlcssmargin
Christoph
Christoph

Reputation: 1387

Margin auto does not work

I am not able to center the banner img. I want it to adjust size when the window size changes. (to keep it in proper proportions on tablets/smartphones)

The image max size is 918px but margin auto does not seems to work. Does anybody have any ideas what could be the problem?

Thanks in advance

original page: http://www.syntra-limburg.be/nieuws/nieuwe-gecertificeerde-opleidingen-2014-2015

<style type="text/css">
#banner img{
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}
</style>
<div class="container-12">
    <div class="grid-12" id="banner"><img alt="" src="/sites/files/content/slides/20140616-gecertificeerde-opleidingen-2014.png" /></div>
</div>

Upvotes: 0

Views: 346

Answers (5)

kva
kva

Reputation: 496

The banner image is getting stretchable, it doesnt look good when in smaller screen size. Remove it from the inline styles.

And try this

#banner img{
    width: 800px;
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

Upvotes: 1

Barnee
Barnee

Reputation: 3389

You'll need:

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

Upvotes: 0

pavel
pavel

Reputation: 27082

Add display: block to img 

#banner img 
{
  display: block;
}

Upvotes: 1

stefferd
stefferd

Reputation: 56

You have to set the width to 100% and it works.

Upvotes: 0

Sandeep Sharma
Sandeep Sharma

Reputation: 506

just try this

#banner { text-align: center; }

Upvotes: 0

Related Questions