Comunidad de diseño web y desarrollo en internet online

Centrar imágenes con CSS

Citar            
MensajeEscrito el 02 Feb 2012 06:15 am
Que tal, tengo el siguiente css

Código :

<!DOCTYPE>
<html lang="es">
   <head>
      <meta charset="utf-8"/>
      <title>Cuenta pública</title>
      <style>
         body{
            background: #EEE;
            margin: 0;
            padding: 0;   
         }
   
         #wrapper{
            margin: 0 auto;
            width: 800px;
            height: 300px;
            background: #999;
            border: 1px solid #000;
            margin-top: 200px;
         }

         #mydiv{
            width: 600px;
            height: 200px;
            background: red;
            margin: 0 auto;
            border: 2px groove black;
         }
         
         img{
            text-align: center;
         }
      </style>
   </head>
   <body>
      <div id="wrapper">
         <div id="mydiv">
            <img src="images/idea1.jpg" width="300px" alt="" />
         </div>
      </div>
   </body>
</html>


Todo bien, pero hay alguna forma de centrar la imagen idea1.jpg en el div en donde està? que es #mydiv

solo on margin-left?? para empujarla al centro?

no hay lago como un text-align??

Cuál es la mejor forma de centrar imágenes con css???

gracias

Por yuukan

48 de clabLevel



Genero:Masculino  

safari
Citar            
MensajeEscrito el 02 Feb 2012 12:25 pm
Pon text-align: center al #mydiv.

Ten en cuenta que <img> es un elemento en línea (in-line) mientras que <div> es de bloque (block), el centrado ocurre dentro del bloque afectando a todos los elementos en línea, no en la línea en sí.

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 02 Feb 2012 03:28 pm
gracias, el chiste es aplicar text-align al div#mydiv

no había tomado en cuenta que todo lo que se aplique al elemento bloque afecta a todos los elementos inline dentro de él

Por yuukan

48 de clabLevel



Genero:Masculino  

safari

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.