ansaurus

Question

Answer 1

A:

horizontal: just try

text-align:center;

:)

roman 2010-01-25 17:53:06

For some reason I have not gotten the hang of posting HTML in here without it rending it as a page, sorry about that, but I think this solution only works in IE,and its not working in this case anyways, is there a cross browser compliant way to do it?

Dan 2010-01-25 17:54:52

@Dan: fixed it. You have to intend every code by four spaces.

Felix Kling 2010-01-25 17:57:04

Answer 2

A:

Either

banner {
     height:100px;
     text-align:center;
     width:960px;
     padding-bottom:10px;}

or if the img is of specific size then

banner img {
         display:block;
         width: <somevalue>px;
         border:none;
         margin:0 auto;
         }

will work ..

Gaby 2010-01-25 17:53:50

Answer 3

A:

I believe it is just margin: auto; No zero needed.

Hunter 2010-01-25 17:53:57

Answer 4

A:

Applying text-align: center to your banner div will center its inline and inline-block children (which encompasses the img tag).

The reason why your code wasn't working is because margin: 0 auto will only center block elements.

nickelleon 2010-01-25 17:54:44

Answer 5

+1 A:

Try setting the image’s display property to block:

banner {
    height: 100px;
    width: 960px;
    padding-bottom: 10px;
}

banner img {
    border: none;
    display: block;
    margin: 0 auto;
}

Paul D. Waite 2010-01-25 17:55:15

bingo, thanks man!

Dan 2010-01-25 17:56:37

You’re most welcome, it’s a bit of a non-obvious CSS thing.

Paul D. Waite 2010-01-25 17:58:03

ansaurus

tags:

views:

answers:

Centering an image within a div

related questions