Centrar DIVS "inline"

FedericoC · #1 (**permalink**) 26/05/2011, 08:55

Buen día!.

Estoy tratando (sin mucho éxito) de centrar dos divs en un contenedor con la propiedad inline.

Mi código es el siguiente:

Código:

<html>

	<head>
		<style>
			body
			{
				text-align:center;
			}
			
			#contenedor
			{
				width:1000px;
				border:1px #444444 solid;
				margin:auto;
				height:300px;
			}
			
			#d1
			{
				float:left;
				border:1px #efefef solid;
			}
			
			#d2
			{
				float:left;
				border:1px #efefef solid;
			}			
			
		</style>
	</head>
	
	<body>
		<div id="contenedor">
			
			<div id="d1">
				a
			</div>
			
			<div id="d2">
				b
			</div>
		</div>
	</body>

</html>

El resultado de este son dos divs alineados a la derecha, pero yo necesitaría que estén en el centro.

¿Alguien podría orientarme un poco?

Saludos!
Federico.

cristian_cena · #2 (**permalink**) 26/05/2011, 09:38

@FedericoC: Convierte el div en caja de línea y ponle a su padre text-align:center;

Ejemplo:

Código HTML:

Ver original<div class="block">
    <div class="inline">soy un div inline centrado</div>
</div>

Código CSS:

Ver original<style type="text/css">
    .block{text-align:center;}
    .inline{display:inline;}
</style>

Saludos.

rossijona · #3 (**permalink**) 26/05/2011, 13:38

Usa un poco de margin.

Recomiendo que no uses "inline"

para conseguir el efecto del inline usa Display:block; float: left;

I.E no le gusta demasiado "inline"

Saludos.

ArturoGallegos · #4 (**permalink**) 26/05/2011, 14:51

Cita:

Iniciado por FedericoC

Buen día!.

El resultado de este son dos divs alineados a la derecha, pero yo necesitaría que estén en el centro.

¿Alguien podría orientarme un poco?

Saludos!
Federico.

?¿ a la derecha? juraría que se encuentran a la izquierda, creo que ya me falla la vista....

de igual forma para centrar divs es mejor usar margin:0 auto; el colocarlos con display:inline no es muy buena idea para tal efecto... pero si insiste procede a retirar cuando menos el float:left ya que si especificas un float este no permitirá que text-align lo afecte a dicho div

cristian_cena · #5 (**permalink**) 26/05/2011, 15:37

Si vas a usar float, límpialo. Aquí un ejemplo.

@rossijona, "I.E no le gusta demasiado "inline"" ¿tienes algun ejemplo para mostrar o link para estudiar?

@Ag666, coincido, lo natural sería usar alguna etiqueta como <span> (inline) </span> que al igual que <div> (block) </div> se pueden considerar que son etiquetas sin carga semántica.

@FedericoC, por si acaso te has perdido: el text-align trabaja sobre elementos de línea, por tanto si das margin:0 auto; a una capa de línea no funcionará.

Saludos.

rossijona · #6 (**permalink**) 02/06/2011, 08:47

Cita:

Iniciado por cristian_cena

Si vas a usar float, límpialo. Aquí un ejemplo.

@rossijona, "I.E no le gusta demasiado "inline"" ¿tienes algun ejemplo para mostrar o link para estudiar?

Saludos.

Si, uno d elos proyectos en el cual estoy trabajando actualmente:

http://fcrespo.infoke.com.uy/camaleon_v1/?tpl=frances

cristian_cena · #7 (**permalink**) 02/06/2011, 10:47

@rossijona: me estas tomando el pelo no?

ambigus · #8 (**permalink**) 02/06/2011, 12:07

Hola quisiera que me ayudaran con estas preguntas, creo que es respecto a este tema,

¿Cómo alineo el menú que he hecho con el bacground?, Si te fijas detalladamente el menú está ligeramente corrido hacia la izquierda y no es equitativa la distribuición.

¿Es posible alinearlo?, y ¿Es posible también alienar el DIV que contiene a todos estos
datos: El menú la imagen, con el centro de la pantalla?

Aquí está mi web en desarrollo: http://extremegamex1.gofreeserve.com...dex_1.2.9.html

Espero una pronta respuesta. :)

IsaBelM · #9 (**permalink**) 02/06/2011, 14:37

hay varias maneras de hacerlo. yo uso en lugar float:left, display:inline-block; y con margin lo centro las opciones.
para centrar todo contenido se usa margin: 0 auto;

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Documento sin título</title>

<style type="text/css">
#fondo {

height:425px;

width:893px;

background:url(http://farm6.static.flickr.com/5065/...f35a7f83_b.jpg) no-repeat;
margin-top: 5px;
margin: 0 auto;

}

#caratula {

float:left;

height:313px;

padding-left: 5px;

padding-right: 5px;

padding-top: 20px;

padding-bottom: 0px;

}

#menu{
width: 100%;
}

#menu ul{
list-style-type: none;
}

#menu li{
width:150px;

height:38px;

font:15px Verdana;
background:url(http://extremegamex1.gofreeserve.com...ton_menu_1.png) no-repeat center;
text-align:center;
color: #FFF;
line-height:38px;
display: inline-block;
margin: 0 4px;
}
</style>

</head>

<body>

<div id="fondo">

<div id="menu">

<ul>

<li>Descripción</li>

<li>Requisitos</li>

<li>Imagenes</li>

<li>Videos</li>

<li>Descargar</li>

</ul>

</div>

<div id="caratula">

<img src="http://extremegamex1.gofreeserve.com/aprendiendocss/images/caratula_crysis.png" width="250" height="313" />

</div>

</div>

</body>

</html>

prueba con esto. el bloque div #menu es opcional

ArturoGallegos · #10 (**permalink**) 02/06/2011, 15:31

Cita:

Iniciado por ambigus

Hola quisiera que me ayudaran con estas preguntas, creo que es respecto a este tema,

¿Cómo alineo el menú que he hecho con el bacground?, Si te fijas detalladamente el menú está ligeramente corrido hacia la izquierda y no es equitativa la distribuición.

¿Es posible alinearlo?, y ¿Es posible también alienar el DIV que contiene a todos estos
datos: El menú la imagen, con el centro de la pantalla?

Aquí está mi web en desarrollo: http://extremegamex1.gofreeserve.com...dex_1.2.9.html

Espero una pronta respuesta. :)

ya que en su html se puede conocer el ancho del menu, yo le daria un ancho fijo y usaria margin:auto, para su caso

Código HTML:

Ver originalul#Menu{width:750px;margin:auto;padding:0;}

Dicho eso-----------------------------------------------------
Compañero @ambigus no me lo tome a mal y no es que me moleste... pero cuando tiene una duda publique un nuevo tema y plantee su caso, no es bueno que coloque su pregunta dentro de otro tema que puede o no tener relación con su caso... si tiene relación es mejor esperar a ver como se desenvuelve hasta llegar a la conclusión y si ya esta resuelto y no despejo su duda usted habrá un nuevo tema.

una vez que ya ha publicado su duda tenga paciencia a que algún usuario que disponga de tiempo le responda no se desespere... y lo digo porque ami me ha dado la impresión de que se desespera al mandar mensajes privados solicitando se atienda su caso y al publicar su duda en este otro tema, igual me parece que ya le había mencionado que no es necesario mande mensajes privados para solicitar se de continuidad, el foro ya notifica cuando se esta suscrito y/o esta participando en un tema.

le pido de continuidad al tema que ya tiene abierto -> http://www.forosdelweb.com/f53/como-...9/#post3877825

y sea paciente....

IsaBelM · #11 (**permalink**) 02/06/2011, 16:36

Cita:

Iniciado por Ag666

ya que en su html se puede conocer el ancho del menu, yo le daria un ancho fijo y usaria margin:auto, para su caso

Código HTML:

Ver originalul#Menu{width:750px;margin:auto;padding:0;}

no crees que eso lo hace menos dinámico?? para añadir nuevas opciones tendrá que recalcular el valor width de dos selectores

ArturoGallegos · #12 (**permalink**) 02/06/2011, 17:05

Cita:

Iniciado por IsaBelM

no crees que eso lo hace menos dinámico?? para añadir nuevas opciones tendrá que recalcular el valor width de dos selectores

jeje amiga @IsaBelM tienes toda la razón, al dar el ancho fijo se pierde flexibilidad...

aunque por otro lado, he considerado la posibilidad de que ya tenga un menú predeterminado que no piensa cambiar a corto plazo, sumado a esto que esta aprendiendo y experimentando.

Nota: creo que esto deberiamos tratarlo en el tema que el abrio para su(s) duda(s)

IsaBelM · #13 (**permalink**) 02/06/2011, 17:18

Cita:

Iniciado por Ag666

Nota: creo que esto deberiamos tratarlo en el tema que el abrio para su(s) duda(s)

estoy de acuerdo. siempre, menos esta vez, digo que no ocupen temas de otros usuarios para hacer sus propias consultas, aunque el tema esté relacionado. aún mas de acuerdo al leer completo tu post anterior. en la anterior lectura que quedé en

Cita:

Dicho eso-----------------------------------------------------
Compañero @ambigus no me lo tome a mal y no es que me moleste...

y pensé, esto no es para mi

rossijona · #14 (**permalink**) 03/06/2011, 07:01

Cita:

Iniciado por cristian_cena

@rossijona: me estas tomando el pelo no?

Ya se, no hay acceso

ahora este:
http://tuwebenlinea.com/camaleon/demoautos/

saludos.

ambigus · #15 (**permalink**) 04/06/2011, 07:50

Huy se armó la de troya aquí XD, no era mi intención causar tanto jaleo XD

rossijona · #16 (**permalink**) 06/06/2011, 07:39

Cita:

Iniciado por ambigus

Huy se armó la de troya aquí XD, no era mi intención causar tanto jaleo XD

jajajjaja, no problem, nos encanta discutir estos temas.

Saludos!.