How to center a banner and keep margin?


Tags: html,css

Problem :

This banner is centered but I still want a margin on the left. I want it to be indented after re-sizing the window so it looks better on lower resolutions and phones.

<div id="banner">
   <center>
      <a target="banner" href="index.html" >
        <img src="images/banner.jpg" border="0" alt="GamerZone Banner">
      </a>
   </center>
</div>

I would like to use css instead of html center as well. Thanks. I wasn't sure how to do it really since I just started learning HTML a week ago. Could you possibly tell me what to try?



Solution :

You could add padding to the container instead e.g.

#banner{
     padding:0 20px;
}
#banner img{
     display:block;
     margin:0 auto;
}

    CSS Howto..

    How to create a simple social sharing dropdown menu in CSS/HTML

    how to prevent vertical Stepdown

    How to make image clipping in css

    How to Align a Link HTML/CSS

    How do you load the css for a Mediawiki tag extension?

    how to change “product details” text to my own text in Virtuemart?

    How to set css class 'active' by using C#?

    How to centre a javascript element using inline css? [closed]

    Responsive website - how to debug a non-responding responsive css?

    How to draw diagonal lines with css [duplicate]

    How to get dynamic css layout like that:

    How can i add a css rule for this code?

    How do I target nested elements with CSS correctly? [closed]

    How to hide the div after sometime in angular or css?

    How to horizontally align to “block” divs inside a div?

    How to align div to center of verital and horizontal

    Both DIV Popups Shown Instead of One

    How to Display text in Middle of table cell Horizontally and vertically in html css?

    Show 100% of background

    How to make recessed button in CSS

    How to position an image sprite at the bottom of an element of unknown height

    How to center absolute div (text) above relative div (image) responsively?

    How to switch css property according to some condition

    How to crop an image edge

    How to get this functionality to work

    How to show ellipsis for long cell values in kendo ui grid?

    How to make whole table cell clickable but vertical align text inside it - CSS

    How do I add keyboard bindings to carousel functionality? - jQuery

    How do I have fieldset::before rule account for the legend?

    How to remove vertical scrollbar from iframe inside the page