[SOLUCIONADO] Div's con Float y que se mantengan en el centro

[madman_18]

Buenos días a todos!

Quería haceros una consulta:

Tengo en el pie de página un footer fijo al 100% del ancho, y ahora dentro tengo lo que sería un contenedor de la información que quiero que me aparezca:

Código HTML:

<footer class="pie"> 
            <section style="width:auto;margin:0 auto;">
                <div style="float:left;"><img src="imagenes/campan.png"/></div>
                <div style="float:left;"><img src="imagenes/desarrollo.png"/></div>
                <div class="limpia"></div>
            </section>
        </footer>
 

Código CSS:

.pie{
width:100%;
height:auto;
position:fixed;
bottom:0;
left:0;
}
.limpia{
clear:both;
}
 

Ahora bien ¿cómo puedo tener las dos imagenes siempre en el centro? He probado con margin:0 auto, text-align:center y nada de nada :( siempre se me van a la parte izquierda (será por el float).

¿Alguna idea?

Gracias!

[pzin]

No veo razón alguna para separar las imágenes por div. Si sacas esos elementos y dejas las imágenes tal cual, con indicar en footer.pie o en ese section un:

Código CSS:

text-align: center
 

te sería suficiente.

Y si, obviamente es por el flotado. Si quieres centrar los div es otra historia, pero si realmente quieres centrar las imágenes, sobran esos div en principio.

De hecho, si ese es todo tu pie, te bastaría con simplificarlo a:

Código CSS:

<footer class="pie"> 
  <img src="imagenes/campan.png"/>
  <img src="imagenes/desarrollo.png"/>
</footer>
 

Código CSS:

footer.pie {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
}
 

[madman_18]

Iniciado por pzin

No veo razón alguna para separar las imágenes por div. Si sacas esos elementos y dejas las imágenes tal cual, con indicar en footer.pie o en ese section un:

Código CSS:

text-align: center
 

te sería suficiente.

Y si, obviamente es por el flotado. Si quieres centrar los div es otra historia, pero si realmente quieres centrar las imágenes, sobran esos div en principio.

De hecho, si ese es todo tu pie, te bastaría con simplificarlo a:

Código CSS:

<footer class="pie"> 
  <img src="imagenes/campan.png"/>
  <img src="imagenes/desarrollo.png"/>
</footer>
 

Código CSS:

footer.pie {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
}
 

Gracias por contestar.

He probado a ponerlo como me dices y nada....es cierto que lo alinea al centro pero me pone como si fuese una debajo de la otra no entiendo por qué

Ahí en el footer tengo que poner tres cosas:

- Nombre de la empresa
- Un pequeño logo
- Imagen empresa desarrollo

De ahí que probase con los float:left y los div, pero nada....algo se me tiene que escapar

[pzin]

Mira a ver que esas imágenes no tengan un posición de bloque, usando el inspeccionador de elementos u otra cosa.

La cuestión es saber cómo quieres colocar esas cosas.

[madman_18]

Iniciado por pzin

Mira a ver que esas imágenes no tengan un posición de bloque, usando el inspeccionador de elementos u otra cosa.

La cuestión es saber cómo quieres colocar esas cosas.

Ok, lo de las imágenes ya está solucionado (las pone una al lado de otra ahora) ahora bien, mi idea es meter, antes de la 1ª imagen el nombre de la empresa, ¿no debería usar entonces divs con los float para tener una estructura digamos como de "tabla" con una fila y tres columnas?

Si ahora pongo un simple <p>Nombre</p> me aparece Nombre y debajo las 2 imagenes que tengo puestas

[pzin]

Es que todo depende. Si usas un párrafo para eso, que es un elemento de bloque, obviamente va a empujar las imágenes hacia abajo. Si usas un elemento como span, no lo hará. Si cambias tu párrafo a un elemento en linea, también seguirán en la misma línea:

Código CSS:

footer.pie p {
  display: inline;
}
 

[madman_18]

Gracias por tu ayuda pzin ;) ;) ya está solucionado con ese display