Cómo centrar elementos en un div de ancho variable en CSS

jclaurian · 7 Mar 2013

Hola compañeros.

Les cuento que me encuentro aprendiendo CSS, esto lo estoy haciendo por medio de ejemplos, pero hasta ahora lo que mas se me está complicando es cómo acomodar los elementos, por ejemplo, tengo el siguiente ejemplo que quiero hacer pero no me funciona:

CSSDesk - 22B6U

El código es una pequeña tarjeta de presentación para un negocio, es un div y dentro tiene otro para el logo, este es de 100x100. El ancho de la tarjeta puede ser variable, y como ven en el ejemplo, la descripción toma parte debajo del logo, lo que trato de hacer es que el logo siempre quede centrado en vertical y el texto de la derecha que no se pase abajo de la imagen. No sé si logro explicarme.

Buscando en Google encontré que con posición aboluta, pero esto hace que la imagen se valla para otras partes, además, el ancho de la tarjeta no lo sé, pues como mencione puede ser variable.

La solución mas sencilla sería crear una tabla con dos columnas, pero quiero evitar esto.

Qué propiedad podría utilizar para evitar esto? desde ya muchas gracias.

asys · 7 Mar 2013

Hola creo que ya resolvi tu problema, lo que tienes que usar es la propiedad "display:inline-block" en tus div de logo y la descripción, tambien se necesita la propiedad "vertical-align:middle" para que se centren los divs unos a otros. Bueno he modificado un poco la semantica de tu html y añadido unas cuantas propiedades en tu css, las cuales seguramente vas a poder identificar, el codigo que resulta es este:

para html:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
<div id="tarjeta_negocio">
<div id="foto_negocio">

LOGO
</div>
<div id="descripcion">
<h3>Applebee's Macroplaza</h3>
<b>Dirección:</b> Macroplaza, Camino Insurgentes 18015, Río Tijuana 3a. Etapa.</br>
<b>Teléfono:</b>664 627 0800</br>
<span class="descripcion_negocio">En Applebee's te ofrecemos deliciosos platillos como los riblets, ensaladas y hamburguesas. Además contamos con exquisitos desayunos a partir de las 8 de la mañana.</span>
</div>
</div>
</body>
</html>
------------------------------------------------------------------------------------------

para tu css:
h3 {
font-size: 18px;
color: red;
margin: 0;
}
#tarjeta_negocio{
background: #999;
width:500px;
}
#foto_negocio{
background:blue;
display:inline-block;
height:100px;
vertical-align:middle;
width:100px;
}
#descripcion{
display:inline-block;
vertical-align:middle;
width:380px;
}
.descripcion_negocio {
font-size: 12px;
}

------------------------

Espero te ayude

jclaurian · 7 Mar 2013

Muchas gracias asys 😀 es justo lo que necesitaba.

Fijate que había probado la propiedad vertical-align:middle; pero no sucedía nada, quizás mi problema era que siempre usaba el float left.

Checare bien como funciona el display:inline-block;

Gracias de nuevo.

Cómo centrar elementos en un div de ancho variable en CSS

jclaurian

asys

jclaurian

Temas similares