Ver Mensaje Individual
  #4 (permalink)  
Antiguo 06/06/2014, 06:05
Avatar de Italico76
Italico76
 
Fecha de Ingreso: abril-2007
Mensajes: 3.303
Antigüedad: 17 años, 1 mes
Puntos: 292
Respuesta: Seleccionar un usuario de una tabla e ingresarla en un textbox

@NueveReinas: che, si es texto al div la aplicas {text-align:center;} y si contiene una imagen {display: block; margin-left: auto; margin-right: auto;}

Lo de display: block; te sirve cuando tienes varios elementos (textos e imagenes) en el mismo div.

Ejemplo:

Código HTML:
Ver original
  1. body {background-color: #000;} 
  2.  
  3. div{   
  4.     background-color: #bbb;
  5.     border:2px solid #bbb;
  6.     height:400px;
  7.     width:400px;
  8.    
  9.     /* centra texto */
  10.     text-align:center;
  11.    
  12.    
  13.     /* centrado vertical */
  14.     display: table-cell;
  15.     vertical-align: middle;
  16. }
  17.  
  18. IMG.displayed
  19. {    
  20.     /* centra imagen: */
  21.     margin-left: auto;
  22.     margin-right: auto
  23.    
  24.     /* hace que el elemento sea el unico horizontalmente, coje todo el width */
  25.     display: block;
  26. }
  27.  
  28.  
  29. <div>
  30. Texto centrado<p/>
  31. <IMG class="displayed" src="http://www.w3.org/Style/Woolly/woolly-mc.png" alt="...">
  32. </div>

Ahora intentemos lo mismo con <CENTER>

Código HTML:
Ver original
  1. body {background-color: #000;} 
  2.  
  3. div{   
  4.     background-color: #bbb;
  5.     border:2px solid #bbb;
  6.     height:400px;
  7.     width:400px;
  8. }
  9.  
  10. <div>
  11.     <center>
  12.         Texto centrado<p/>
  13.         <IMG class="displayed" src="http://www.w3.org/Style/Woolly/woolly-mc.png" alt="..."><br/>      
  14.     </center>
  15. </div>

OK... hubo un centrado pero fue SOLO HORIZONTAL..... y peor... ahora supongamos no tenemos una imagen sino varias y no queremos seguir las recomendaciones de la W3C de usar CSS para el centrado:

Código HTML:
Ver original
  1. body {background-color: #000;} 
  2.  
  3. div{   
  4.     background-color: #bbb;
  5.     border:2px solid #bbb;
  6.     height:400px;
  7.     width:400px;
  8. }
  9.  
  10. <div>
  11.     <center>
  12.         Texto centrado<p/>
  13.         <IMG class="displayed" src="http://www.w3.org/Style/Woolly/woolly-mc.png" alt="...">
  14.         <IMG class="displayed" src="http://www.w3.org/Style/Woolly/woolly-mc.png" alt="...">
  15.         <IMG class="displayed" src="http://www.w3.org/Style/Woolly/woolly-mc.png" alt="...">
  16.     </center>
  17. </div>

Que paso ahi ?

Si... podriamos poner un <br/> donde nos convenga (aun seguimos con el problema del centrado vertical) pero estamos ensuciando el HTML con elementos innecesarios!


Te recomiendo este articulo
__________________
Salu2!

Última edición por Italico76; 06/06/2014 a las 06:51