Buenas, resulta que estoy tratando de centrar una imagen encima de otra y aunque he conseguido hacer la imagen absoluta sea redonda y tenga más o menos las características que necesito el problema es que la imagen que está encima no se centra correctamente sino que aparecea la izquierda totalmente a pesar de averle quitado el float, nosé si es un fallo que se me ha pasado o si es que tengo que utilizar alguna clase de bootstrap para esto, intenté utilizar center-block pero no me surte efecto. Os dejo el html y el css para que podais comprobar si está todo correcto.
<body>
<header>
<nav class="colormenu alto-navegador">
<ul class="no-lista">
<li class="col-md-3 granito inline-block"><a href="sobremi.html">Sobre mí</li>
<li class="col-md-3 granito inline-block"><a href="portafolios.html">Portafolios</a></li>
<li class="col-md-3 granito inline-block"><a href="cv.html">Currículum</a></li>
<li class="col-md-3 granito inline-block"><a href="contacto.html">Contáctame</a></li>
</ul>
</nav>
</header>
<div class="bgh">
<img src="img/backheed.jpg" class="imagen-peq-red"/>
</div>
</body>y este es el css:
.imagen-peq-red{
position: absolute;
border-radius: 50%;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
height: 180px;
margin: 0px auto;
margin-top: 20px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
width: 180px;
float: none;
}
No pretendo que me hagan el trabajo ni mucho menos solo que me digan si existe alguna clase específica para centrar esta imagen en el centro y si es así si existiría alguna incompatibilidad con los atributos que refleja el css. El navegador que estoy usando es mozilla.
Gracias de antemano por leer.
MODIFICO: Os pongo una captura de como queda la imagen para que veais a que me refiero con que no está bien centrada.
(http://i59.tinypic.com/e1431v.jpg)
Prueba a utilizar la etiqueta:
padding-left: 50%;
En la clase madre, e intenta ajustarla haber.
Prueba y coméntanos.
Saludos.
Ya lo he solucionado, el problema estaba en que necesitaba poner un div y un text-align como atributo de ese div, después en la clase imagen-peq-red he quitado la position:absolute y funciona correctamente.
Gracias igualmente por todo, dejo debajo como lo he solucionado.
Así me ha quedado el html:
<body>
<header>
<nav class="colormenu alto-navegador">
<ul class="no-lista">
<li class="col-md-3 granito inline-block"><a href="sobremi.html">Sobre mí</li>
<li class="col-md-3 granito inline-block"><a href="portafolios.html">Portafolios</a></li>
<li class="col-md-3 granito inline-block"><a href="cv.html">Currículum</a></li>
<li class="col-md-3 granito inline-block"><a href="contacto.html">Contáctame</a></li>
</ul>
</nav>
</header>
<div class="bgh">
<div class="abajito">
<img src="img/backheed.jpg" class="imagen-peq-red" alt="Crr"/>
</div>
</div>
<section>
<article>
</article>
</section>
</body>
Y este es el css:
.abajito{
text-align: center;
display: block;
}
.imagen-peq-red{
border-radius: 50%;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
height: 180px;
margin: 0 auto;
margin-top: 20px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
width: 180px;
float: none;
}
PD: Gracias por responder YuseTist