No sé como centra una imágen dentro de article

[mblascog]

Buenas,
Lo que quiero conseguir es centrar una imagen una imagen.
Las dimensiones del section son 1024 x 350.
Quisiera que article heredara dichas dimensiones, pero sólo hereda el ancho, el alto es 147, que es la altura de la imagen más el margin

Código HTML:

<section>
        <article id="index">
            <img id="index" src='img/retol.png'/>
        </article>
    </section>
 

Código CSS:

section{
    width:100%;
    min-height:350px;
    overflow:hidden;
    background:#BABABA;
    float:left;
}
 
section article#index{
    width:100%;
    height:100%;
    margin:0 auto;
}
 

No sé si debería poner un div dentro de article. La verdad es que me lío.

Gracias

[falkon765]

pues primero que todo usar 2 id para distintos elementos esta mal,
intenta esto

Código HTML:

<section>
        <article>
            <img id="index" src='img/retol.png'/>
        </article>
</section>
 

Código CSS:

section{
    width:100%;
    min-height:350px;
    overflow:hidden;
    background:#BABABA;
}
 
section article{
    width:900px;
    height:100%;
    margin:0 auto;
}
section article #index{
    width:450px;
    height:100%;
    margin:0 auto;
}
 

si te va funcionando ve variando el ancho asta que quede como te guste.
espero te sirva

[alzacon]

¿De dónde va a heredar el height? Si no lo declaras tomara el valor por defecto (auto) el 100% de auto es auto.

Las imagenes es elemento inline, por lo que se centra como el texto.