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!