[SOLUCIONADO] Como alinear 3 divs horizontalmente como se muestra en la imagen

kevin_91bo · #1 (**permalink**) 14/02/2014, 06:52

Buenas a todos , he estado probando alinear los divs horizontalmente y a la única solución a la que he llegado es a la siguiente:

quiero alinear los logos BLANCOS de esa forma y la unica solucion es poniendolos dentro de los divs para separarlos.

El problema es que el div izquierdo se pone arriba, y tiene un VERTICAL-ALIGN:MIDDLE. en cambio el derecho si que me acepta el VERTICAL ALIGN:MIDDLE

No se si hay alguna otra manera de alinearlos de tal forma que esten centrados horizontalmente y centrados verticalmente.

dejo el cófigo:

Código HTML:

<head>
<style type="text/css">
            header{
	       background:#E6E6E6;
	        text-align:center;
             }
.cuerpocentral{
	background:#ccc;
	margin:0 auto;
	width:80%;
 }
header #logo1,#logo2,#logo3{
	display:inline-block;
	width:32%;
	vertical-align:top;
	background:red;
}
header #logo1,#logo3{
	vertical-align:middle;
}
header #logo1 img{
	float:left;
	
}
header #logo3 img{
	float:right;
}

</style>
</head>
<body>
	<header>
		<div class="cuerpocentral">
			<div id="logo1">
				<img src="img/logos/logo1.jpg" alt="">
			</div>
			<div id="logo2">
				<img src="img/logos/logo2.jpg" alt="">
			</div>
			<div id="logo3">
				<img src="img/logos/logo3.jpg" alt="">
			</div>
		</div>
</body>

gracias de ante mano!

herzbazi · #2 (**permalink**) 14/02/2014, 08:08

Código CSS:

Ver original.logo{
            width: 300px;
            height: 200px;
            background-color: #eee;
            display: inline-block;
        }

Código HTML:

Ver original<div class="cuerpocentral">
            <div class="logo">
                <img src="" alt="">
            </div>
            <div class="logo">
                <img src="" alt="">
            </div>
            <div class="logo">
                <img src="" alt="">
            </div>
        </div>

veo que usas mucho el id lo cual no es malo pero para elementos que tienen caracteristicas compartidas puedes usar mejor class y eso te ayuda mucho , lo otro es que hoy en dia es muy comun trabajar haciendo flotar los elementos

http://librosweb.es/referencia/css/display.html

o bien el float

http://librosweb.es/referencia/css/float.html este otro por lo general tienes que limpiar el css para evitar que afecte a otros elementos.

ahi esta la base de lo que buscas hora , mejora el codigo y optimizalo para tus necesidades

kevin_91bo · #3 (**permalink**) 14/02/2014, 11:07

Cita:

Iniciado por herzbazi

Código CSS:

Ver original.logo{
            width: 300px;
            height: 200px;
            background-color: #eee;
            display: inline-block;
        }

Código HTML:

Ver original<div class="cuerpocentral">
            <div class="logo">
                <img src="" alt="">
            </div>
            <div class="logo">
                <img src="" alt="">
            </div>
            <div class="logo">
                <img src="" alt="">
            </div>
        </div>

veo que usas mucho el id lo cual no es malo pero para elementos que tienen caracteristicas compartidas puedes usar mejor class y eso te ayuda mucho , lo otro es que hoy en dia es muy comun trabajar haciendo flotar los elementos

[URL="http://librosweb.es/referencia/css/display.html"]http://librosweb.es/referencia/css/display.html[/URL]

o bien el float

[URL="http://librosweb.es/referencia/css/float.html"]http://librosweb.es/referencia/css/float.html[/URL] este otro por lo general tienes que limpiar el css para evitar que afecte a otros elementos.

ahi esta la base de lo que buscas hora , mejora el codigo y optimizarlo para tus necesidades

Gracias por tu respuesta.
Claro que si le hago unn display:inline-block se linearán uno detrás de otro, pero el resultado que yo quiero es que el logo de la izquierda este en el extremo izquierdo el de la derecha en el extremo derecho y el central que es un poco mas grande se quede en el centro , tal que al hacer pequeño la ventana vaya perdiendo el margen que hay entre ellos . y que no estén a la misma altura ya que el logo central es mas grande.
No se si me explico bien , de ahí a que tenga el código un poco sucio intentando hacer esto.

kevin_91bo · #4 (**permalink**) 14/02/2014, 11:17

Es esto lo que quiero conseguir:
Que estilo aplico para poder obtener esto , 2 logos a los extremos y uno central mas grande. no a la misma altura , sino centrado ya que el del medio es mas grande.
Se que con medidas absolutas lo puedo conseguir pero lo quiero hacer responsive cosa que cuando se reduzca la ventana pierda el margen poco a poco que hay entre ellos.

código:

Código HTML:

 <header>
			<div id="logo1">
				<img src="img/logos/logo1.jpg" alt="">
			</div>
			<div id="logo2">
				<img src="img/logos/logo2.jpg" alt="">
			</div>
			<div id="logo3">
				<img src="img/logos/logo3.jpg" alt="">
			</div>
	</header>

Muchas gracias por la ayuda, un saludo y feliz san valentin.

RaulCDT · #5 (**permalink**) 17/02/2014, 03:41

Yo tengo esto y me funciona:

Código HTML:

Ver original<div id="top"><a href="/" title="Tu web de eventos y descuentos"><img src="img/logoCrazy.png" alt="Tu web de eventos" title="CrazyMurcia.com" /></a></div>
<div style="position: absolute; top: 5px; left: 811px;">
    <img src="img/redsocial.png" border="0" alt="Redes Sociales" />
</div>

Código CSS:

Ver original#top {
    padding-top:10px;
    height:92px;
    overflow:hidden;
}
#top .addthis {
    float: left;
    width: 995px;
}

pzin · #6 (**permalink**) 17/02/2014, 03:43

Puedes imitar el comportamiento de una tabla (con display: table/table-cell) y centrar luego los elementos verticalmente.

kevin_91bo · #7 (**permalink**) 17/02/2014, 10:24

Cita:

Iniciado por pzin

Puedes imitar el comportamiento de una tabla (con display: table/table-cell) y centrar luego los elementos verticalmente.

Voy a probarlo haber que tal. Gracias.

kevin_91bo · #8 (**permalink**) 18/02/2014, 07:39

Bueno la solución que apliqué fue la de darle DISPLAY:TABLE-CELL como me comento PZIN, y las aplique floats a las imágenes dentro de los divs, así conseguí que estén en los extremos y respetara el responsive.
Gracias a todos-