Foros del Web » Creando para Internet » CSS »

Centrar DIVS "inline"

Estas en el tema de Centrar DIVS "inline" en el foro de CSS en Foros del Web. 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> ...
  #1 (permalink)  
Antiguo 26/05/2011, 08:55
 
Fecha de Ingreso: junio-2004
Ubicación: Argentina
Mensajes: 150
Antigüedad: 20 años, 5 meses
Puntos: 2
Centrar DIVS "inline"

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.
  #2 (permalink)  
Antiguo 26/05/2011, 09:38
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 15 años, 5 meses
Puntos: 269
Respuesta: Centrar DIVS "inline"

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

Ejemplo:

Código HTML:
Ver original
  1. <div class="block">
  2.     <div class="inline">soy un div inline centrado</div>
  3. </div>

Código CSS:
Ver original
  1. <style type="text/css">
  2.     .block{text-align:center;}
  3.     .inline{display:inline;}
  4. </style>

Saludos.
  #3 (permalink)  
Antiguo 26/05/2011, 13:38
 
Fecha de Ingreso: junio-2010
Mensajes: 142
Antigüedad: 14 años, 5 meses
Puntos: 5
Respuesta: Centrar DIVS "inline"

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.
  #4 (permalink)  
Antiguo 26/05/2011, 14:51
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 9 meses
Puntos: 1146
Respuesta: Centrar DIVS "inline"

Cita:
Iniciado por FedericoC Ver Mensaje
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
  #5 (permalink)  
Antiguo 26/05/2011, 15:37
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 15 años, 5 meses
Puntos: 269
Respuesta: Centrar DIVS "inline"

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.
  #6 (permalink)  
Antiguo 02/06/2011, 08:47
 
Fecha de Ingreso: junio-2010
Mensajes: 142
Antigüedad: 14 años, 5 meses
Puntos: 5
Respuesta: Centrar DIVS "inline"

Cita:
Iniciado por cristian_cena Ver Mensaje
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
  #7 (permalink)  
Antiguo 02/06/2011, 10:47
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 15 años, 5 meses
Puntos: 269
Respuesta: Centrar DIVS "inline"

@rossijona: me estas tomando el pelo no?
  #8 (permalink)  
Antiguo 02/06/2011, 12:07
 
Fecha de Ingreso: septiembre-2008
Mensajes: 221
Antigüedad: 16 años, 2 meses
Puntos: 1
Respuesta: Centrar DIVS "inline"

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. :)
  #9 (permalink)  
Antiguo 02/06/2011, 14:37
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años, 5 meses
Puntos: 1012
Respuesta: Centrar DIVS "inline"

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
  #10 (permalink)  
Antiguo 02/06/2011, 15:31
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 9 meses
Puntos: 1146
Respuesta: Centrar DIVS "inline"

Cita:
Iniciado por ambigus Ver Mensaje
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 original
  1. ul#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....
  #11 (permalink)  
Antiguo 02/06/2011, 16:36
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años, 5 meses
Puntos: 1012
Respuesta: Centrar DIVS "inline"

Cita:
Iniciado por Ag666 Ver Mensaje
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 original
  1. ul#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
  #12 (permalink)  
Antiguo 02/06/2011, 17:05
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 9 meses
Puntos: 1146
Respuesta: Centrar DIVS "inline"

Cita:
Iniciado por IsaBelM Ver Mensaje
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)
  #13 (permalink)  
Antiguo 02/06/2011, 17:18
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años, 5 meses
Puntos: 1012
Respuesta: Centrar DIVS "inline"

Cita:
Iniciado por Ag666 Ver Mensaje
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
  #14 (permalink)  
Antiguo 03/06/2011, 07:01
 
Fecha de Ingreso: junio-2010
Mensajes: 142
Antigüedad: 14 años, 5 meses
Puntos: 5
Respuesta: Centrar DIVS "inline"

Cita:
Iniciado por cristian_cena Ver Mensaje
@rossijona: me estas tomando el pelo no?
Ya se, no hay acceso


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

saludos.
  #15 (permalink)  
Antiguo 04/06/2011, 07:50
 
Fecha de Ingreso: septiembre-2008
Mensajes: 221
Antigüedad: 16 años, 2 meses
Puntos: 1
Respuesta: Centrar DIVS "inline"

Huy se armó la de troya aquí XD, no era mi intención causar tanto jaleo XD
  #16 (permalink)  
Antiguo 06/06/2011, 07:39
 
Fecha de Ingreso: junio-2010
Mensajes: 142
Antigüedad: 14 años, 5 meses
Puntos: 5
Respuesta: Centrar DIVS "inline"

Cita:
Iniciado por ambigus Ver Mensaje
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!.

Etiquetas: divs, inline
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 2 personas




La zona horaria es GMT -6. Ahora son las 19:39.