[SOLUCIONADO] Problema para centrar una imagen reducida de tamaño

MatyD · #1 (**permalink**) 10/05/2015, 13:41

Como están?

Tengo un problema estoy intentando centrar una imagen pero es imposible, todo funciona perfecto hasta uqe reduzco la imagen para hacerla compatible con pantallas retina, si la uso en su tamaño original se centra perfectamente. Pero cuando le doy width 50% se queda en la izquierda del contenedor "figure"

Este es el código HTML

Código HTML:

<body>
  <main class="main_container">
    <header class="header">
      <figure class="logo">
        <img class="img_logo" src="http://effervescence.me/wp-content/uploads/2014/01/UnencumberedSharingCircleBanner600px.jpg" alt="logo" />
      </figure>
      <form action="">
        <input type="text" />
        <input type="text" />
      </form>
      <nav class="nav_menu">
        		<ul>
			          <li>BOTON1</li>
			          <li>BOTON2</li>
			          <li>BOTON3</li>
		        </ul>
      </nav>
    </header>
    
    <section class="prueba1">
      <h1>Titulo 1</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat doloribus itaque vel repudiandae nisi voluptatum quos distinctio quis cum, beatae illum sit delectus aut blanditiis ut voluptate vitae reiciendis velit?</p>
    </section>
    
    <section class="prueba2">
      <h1>Titulo 2</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum dolor animi, sunt hic architecto, blanditiis suscipit quas eos ex a repellendus quisquam dolores ut sit qui laborum ea! A, incidunt!</p>
    </section>
    
    <footer>
      PIE DE PAGINA
    </footer>
  </main>
</body>

Este es el CSS

Código CSS:

Ver originalboddy, figure, img, ul, li {
  margin: 0;
  padding: 0; }
 
li {
  background-color: #556270;
  color: white;
  display: inline-block;
  list-style-type: none;
  padding: .5em; }
 
.main_container {
  background-color: olive;
  max-width: 60rem;
  padding: 0.4em;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column; }
 
.header {
  background-color: #C7F464;
  padding: 0.4em;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
}
 
.logo {
  align-self: center;
  background-color: grey;
}
 
.img_logo{
  width: 50%;
}
 
.nav_menu{
  align-self: flex-end;
}
 
.prueba1 {
  background-color: #FF6B6B;
}
 
.prueba2 {
  background-color: #4ECDC4;
}

Quedo a la espera de su ayuda porque ya la verdad no se que más intentar!

Desde ya muchas gracias por todo!

alfuco · #2 (**permalink**) 11/05/2015, 01:24

Yo de momento te hago la POLE POSITION.

Mañana en carrera pienso doblar hasta al segundo.

NANO

alfuco · #3 (**permalink**) 11/05/2015, 01:31

Prueba con esto tete:

Código:

.logo {   
    margin: 0px 0px 15px 0px;
    padding: 0px;
    width: 100%;
    text-align: center;
    display:inline-block;
    vertical-align: top;
}

MatyD · #4 (**permalink**) 11/05/2015, 06:16

No se achica la imagen al 50% real queda más grande pero si se centro!

http://codepen.io/anon/pen/oXbMNx

Este es el link a codepen donde puedes ver lo que digo. solo deberían comentar la clase .logo que está activa y descomentar tu código.

cuando utilizo tu código queda achicada como a un 80% aproximadamente del tamaño real de la imagen y no al 50% como yo quiero

Saludos!

fede5426 · #5 (**permalink**) 11/05/2015, 06:40

Proba esto:

Código CSS:

Ver original.logo {   
    max-width: 600px;
    margin:0 auto 15px auto;
}
 
.img_logo{
   width:100%; 
}

Usando solo eso la imagen tiene el tamaño original, está centrada y se ajusta según el ancho de la ventana.

http://codepen.io/anon/pen/xGZJOw

PD: Para comentar CSS se usa /* comentario */.. con la doble barra no se comenta nada

Edito, acabo de entender que lo que querés es que la imagen esté al 50% de su tamaño, usando el código que te acabo de pasar modifica el max-width de .logo por 300px (que es la mitad de 600, 50%) y te queda del tamaño que necesitas.

http://codepen.io/anon/pen/PqZBzE

Y de paso, me olvide de decírtelo antes, tenes declarados estilos para "boddy".. es con una sola "D".. body

MatyD · #6 (**permalink**) 11/05/2015, 06:51

Cita:

Iniciado por fede5426

Proba esto:

Código CSS:

Ver original.logo {   
    max-width: 600px;
    margin:0 auto 15px auto;
}
 
.img_logo{
   width:100%; 
}

Usando solo eso la imagen tiene el tamaño original, está centrada y se ajusta según el ancho de la ventana.

[url]http://codepen.io/anon/pen/xGZJOw[/url]

PD: Para comentar CSS se usa /* comentario */.. con la doble barra no se comenta nada

Es cierto mil disculpas jaja ya decía yo que me parecía raro que no se pusieran en gris las lineas :P

de todas formas la imagen sigue sin qeudar centrada al estar reducida de tamaño. Yo necesito que se muestre al 50% maximo

Pero ahora ya con tu código y poniendo el max width en 300 que es la mitad del tamaño de la imagen en lugar de 600 la pude centrar.

Pero pensé que podría haberlo hecho con porcentajes ya que si en algún momento el logo se agranda porque cambia la imagen el código no va a ser reutilizable ya que debo editar unidades absolutas aquí el logo siempre va a tener 300px de ancho aunque la imagen que me brinden para el logo mida más de 600 o menos de 600 la idea es que ocupe el 50% del tamaño de la imagen y quede centrada sin importar el tamaño real de la misma.

Por ahora me sirve al conocer las medidas exactas de la imagen pero que pasaría si desconociera estas medidas?

podremos encontrar alguna solución usando porcentajes?

Ya que aquí tienes el codepen para ver como queda al utilizar porcentajes. como verás sigue estando a la izquierda al eliminar el max-width

http://codepen.io/anon/pen/oXbMNx

fede5426 · #7 (**permalink**) 11/05/2015, 07:38

Cita:

Iniciado por MatyD

podremos encontrar alguna solución usando porcentajes?

Agrega text-align:center; a .logo

http://codepen.io/anon/pen/WvrKgm

MatyD · #8 (**permalink**) 11/05/2015, 07:56

Mas que agradecido!!!