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.
<header>
<nav class="colormenu alto-navegador">
<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> </nav>
</header>
<img src="img/backheed.jpg" class="imagen-peq-red"/>
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.
Autor
En línea
