Poner varios divs en la misma linea y centrados?

Citar

Escrito el 10 May 2006 03:11 am

Hola, me lei 3 tutoriales, el foro y no encontre nada al respecto. debe ser una pregunta muy novata para los expertos, pero bueno, estoy hace una hora con esto y no logro hacer que se vea como quiero.
el tema es que quiero mostrar mas de una etiqueta div (cada una con su contenido) en la misma linea y a su vez centrado dentro de otra div.
ya probe con "float" pero no admite center (solo left y right). de la unica forma que masomenos queda, es ponerle la propiedad padding (en left y right) a la div contenedora, pero como ya dije, queda "masomenos", no es realmente lo que busco. busco alguna propiedad que directamente haga que varias div en la misma linea y centradas, como si fuera un "float:center".

Saludos

Por PabloHdS

251 de clabLevel

Envíale un mensaje privado Email

Citar

Escrito el 10 May 2006 03:16 am

No entiendo lo que quieres hacer?
Te refieres a centrarlas vertical u horizontalmente?

Por Ramm

BOFH

3152 de clabLevel

6 tutoriales
8 articulos

Genero:Masculino Bastard Operators From Hell REC Héroes

Envíale un mensaje privado Web

London, UK

@ramono

Citar

Escrito el 10 May 2006 04:22 am

flotas los 3 divs hasta que se forme la fila, luego creas un div que contenga estos divs, le pones un tamaño fijo y lo centras con

Código :

margin:0 auto;

No olvides agregarle el clear:both antes de que se cierre el contenedor.

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino Anime Bloggers Premio_Secretos Team Cristalab

Envíale un mensaje privado Web

Front-end Developer en Washington, DC

@neojp

Citar

Escrito el 10 May 2006 04:52 am

Algo debo estar haciendo mal, porque no logro que se vea bien con lo que me recomendaste que haga NEO_JP.
para hacerla mas facil, posteo el codigo del html y del css.

Código :

<body>
<div class="titulo">:: Men&uacute; Principal ::</div>
<div id="tabla">
   <div class="titulo_tabla">.: NOTICIAS :.</div>
   <div class="contenedor_opciones">
      <div class="opciones"><img src="imagenes/agregar.jpg" width="75" height="75" /><br />Agregar</div>
      <div class="opciones"><img src="imagenes/eliminar.jpg" width="75" height="75" /><br />Eliminar</div>
      <div class="opciones"><img src="imagenes/modificar.jpg" width="75" height="75" /><br />Modificar</div>
      <div class="opciones"><img src="imagenes/ver.jpg" width="75" height="75" /><br />Mostrar Listado</div>
      <div class="clear"></div>
   </div>
</div>
</body>

Código :

#tabla{
   margin-top:30px;
   margin-bottom:auto;
   margin-left:auto;
   margin-right:auto;
   text-align:center;
   width:500px;
   min-height:50px;
   background-color:#F8f8f8;
}
.titulo_tabla{
   background:#7CA5CF;
   height:25px;
   color:#FFFFFF;
   font-weight:bold;
   font-size:14px;
   border:#000000 1px solid;
   vertical-align:middle;
}
.contenedor_opciones{
   margin:0 auto;
   width:500px;
   border:#000000 1px solid;
   min-height:30px;
   text-align:center;
}
.opciones{
   padding-left:0px 2px;
   margin:2px 5px;
   color:#000000;
   font-weight:normal;
   font-size:12px;
   vertical-align:middle;
   text-align:center;
   float:left;
}
.clear{
   clear:both;
}

y lo veo asi

Saludos y gracias por responder

Por PabloHdS

251 de clabLevel

Envíale un mensaje privado Email

Citar

Escrito el 10 May 2006 12:46 pm

No entendí que quieres hacer... ¿podrás ser más explicito? y si puedes da un ejemplo mgráfico de lo que deseas lograr...

Por Aoyama

BOFH

6224 de clabLevel

6 tutoriales
12 articulos

Genero:Masculino Anime Bloggers Bastard Operators From Hell

Envíale un mensaje privado

Webdesigner & Developer, en mis ratos libres bebo café por litros.

Citar

Escrito el 10 May 2006 01:36 pm

PabloHdS escribió:

y lo veo asi

Saludos y gracias por responder

Y no es asi como lo quieres?

PabloHdS escribió:

busco alguna propiedad que directamente haga que varias div en la misma linea y centradas

Yo veo una fila de divs centrados.
Si no es eso lo que buscas, pon una imagen con lo que quieres al menos

Por Ramm

BOFH

3152 de clabLevel

6 tutoriales
8 articulos

Genero:Masculino Bastard Operators From Hell REC Héroes

Envíale un mensaje privado Web

London, UK

@ramono

Citar

Escrito el 10 May 2006 04:58 pm

Se ve asi.

Y yo quiero que se vea asi.

El segundo esta hecho con tablas, el primero con divs.

Es solo un detalle, pero queda mejor visualmente si estan centrados.

Saludos

Por PabloHdS

251 de clabLevel

Envíale un mensaje privado Email

Citar

Escrito el 10 May 2006 04:58 pm

Mira pues si entendi bien quieres centrar las divs que contienen las imagenes de forma horizontal. Mira una idea de lo que quieres. Ahora solo falta el texto abajo de cada imagen

HTML

Código :

<html>
<head>

<link href="estilos.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="titulo">:: Men&uacute; Principal ::</div>
<div id="tabla">
   <div class="titulo_tabla">.: NOTICIAS :.</div>
   <div class="contenedor_opciones">
<div><img src="imagenes/agregar.jpg" width="75" height="75" /></div>
<div><img src="imagenes/agregar.jpg" width="75" height="75" /></div>
<div><img src="imagenes/agregar.jpg" width="75" height="75" /></div>
<div><img src="imagenes/agregar.jpg" width="75" height="75" /></div>

  </div>
  </div>
  </body>
</html>

CSS

Código :

#tabla{
   margin-top:30px;
   margin-bottom:auto;
   margin-left:auto;
   margin-right:auto;
   width:500px;
   min-height:50px;
   background-color:#F8f8f8;
}
.titulo_tabla{
   background:#7CA5CF;
   height:25px;
   color:#FFFFFF;
   font-weight:bold;
   font-size:14px;
   border:#000000 1px solid;

}
.contenedor_opciones{

   width:500px;
   border:#000000 1px solid;
   min-height:30px;
   text-align:center
}
.contenedor_opciones div {display:inline; position:relative; border: 1px solid red; margin:5px}

.clear{
   clear:both;
}

Por Coyr

Claber

1048 de clabLevel

2 tutoriales

Envíale un mensaje privado Web

Manizales city

Citar

Escrito el 10 May 2006 07:56 pm

gracias coyr, de esa forma si centra las imagenes. cuando agrego el texto se deforma todo, asique estoy viendo ahora como solucionar eso. gracias por las respuestas.

Saludos

Por PabloHdS

251 de clabLevel

Envíale un mensaje privado Email

Citar

Escrito el 10 May 2006 08:21 pm

NEO_JP escribió:

flotas los 3 divs hasta que se forme la fila, luego creas un div que contenga estos divs, le pones un tamaño fijo y lo centras con

Código :

margin:0 auto;

No olvides agregarle el clear:both antes de que se cierre el contenedor.

Oye mirá, PabloHdS la forma que te puso NEO_JP arriba es la mas sencilla, y la mejor. No se, no la vi

.

Por Coyr

Claber

1048 de clabLevel

2 tutoriales

Envíale un mensaje privado Web

Manizales city

Citar

Escrito el 10 May 2006 10:18 pm

coyr escribió:

Oye mirá, PabloHdS la forma que te puso NEO_JP arriba es la mas sencilla, y la mejor. No se, no la vi

.

Eso ya probe, pero no lo pude solucionar de ese modo.

Saludos

Por PabloHdS

251 de clabLevel

Envíale un mensaje privado Email

Citar

Escrito el 04 Jun 2010 05:34 pm

Hola que tal, para centrar varios DIV en la misma linea quedaria asi:

<style type="text/css">
#tabla{
margin-top:30px;
margin-bottom:auto;
margin-left:auto;
margin-right:auto;
width:500px;
min-height:50px;
background-color:#F8f8f8;
}
.titulo_tabla{
background:#7CA5CF;
height:25px;
color:#FFFFFF;
font-weight:bold;
font-size:14px;
border:#000000 1px solid;

}
.contenedor_opciones{

width:500px;
border:#000000 1px solid;
min-height:30px;
text-align:center
}
.contenedor_opciones div {display:inline; position:relative; border: 1px solid red; margin:5px}

.clear{
clear:both;
}

</style>

<body>
<div class="titulo">:: Menú Principal ::</div>
<div id="tabla">
<div class="titulo_tabla">.: NOTICIAS :.</div>
<div class="contenedor_opciones">
<div>dasdsad</div>
<div>dsadsa</div>
<div>dasdas</div>
<div>dasdas</div>

</div>
</div>
</body>

Espero les sirva de algo, saludos...

Por salars

0 de clabLevel

Envíale un mensaje privado

Poner varios divs en la misma linea y centrados?

Escribe una respuesta rapida