[SOLUCIONADO] Comportamiento diferente según etiquetas

Iballa · #1 (**permalink**) 09/06/2013, 11:15

Hola, tengo una duda:

Quiero poner un header, verde, con una imagen dentro del header también, que ocupe un 70% más o menos....el caso es que si lo hago así, de la forma 1, no me sale centrada la imagen, por más "margin:0 auto;" que le dé, la imagen se me queda pegada a la izquierda....pero si lo hago de la forma 2, con un <div> alrededor de la <img> sí me sale, (con el CSS idéntico a la 1) ¿es que la etiqueta <img> no es una etiqueta que se comporte igual que un <div>? al fin y al cabo no deja de ser otra caja más (la <img> ...Gracias

FORMA 1:

Código HTML:

Ver original<body>
    <div class="all">
 
              <header>
                 
                    <img src="img/header-photo.jpg" class="header-img">
                
              </header>
 
        </div>
    </div>
</body>

Código CSS:

Ver originalheader {
    background: #5E803F;
    width: 100%;
    height:250px;
}
.header-img {
    margin: 0 auto;
    width: 70%;
}

FORMA 2:

Código HTML:

Ver original<body>
    <div>
              <header>
                 <div class="header-img">
                    <img src="img/header-photo.jpg">
                </div>
              </header>
 
 
        </div>
    </div>
    
</body>

Bandit · #2 (**permalink**) 09/06/2013, 13:02

Hola iballa:
El CSS del header escríbelos así:

Código CSS:

Ver originalheader{
    background: #5E803F;
    height:250px;
    text-align: center;
    width: 100%;
}

Espero haberte sido de ayuda.

Triby · #3 (**permalink**) 09/06/2013, 13:31

La principal diferencia es que <img /> es un elemento en línea y <div /> es un bloque. Puedes usar la solución propuesta por Bandit y funcionará como esperas.

También podrías aplicar a la imagen el margen y la propiedad display:block; para que se comporte igual que un div.

Iballa · #4 (**permalink**) 10/06/2013, 03:33

Muchas gracias, me he ahorrado mucho código. Pensaba que "text align" era únicamente para los textos. :) saludos¡

pzin · #5 (**permalink**) 10/06/2013, 04:21

Cita:

Iniciado por Iballa

Muchas gracias, me he ahorrado mucho código. Pensaba que "text align" era únicamente para los textos. :) saludos¡

Es un poco confuso por el nombre la verdad. Pero es eso, cualquier elemento con el valor inline o inline-block para display tomará la alineación que indiques con text-align.