[Resuelto] centrar imagen posicion absoluta

Thryks · 6 Septiembre 2015, 16:07 PM

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.

Código (html4strict) [Seleccionar]

<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:

Código (css) [Seleccionar]


.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.

DeMoNcRaZy · 6 Septiembre 2015, 16:38 PM

Prueba a utilizar la etiqueta:

Código (css) [Seleccionar]

padding-left: 50%;

En la clase madre, e intenta ajustarla haber.

Prueba y coméntanos.

Saludos.

Thryks · 6 Septiembre 2015, 16:42 PM

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:

Código (html4strict) [Seleccionar]


<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:

Código (css) [Seleccionar]


.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

Test Foro de elhacker.net SMF 2.1

[Resuelto] centrar imagen posicion absoluta

Thryks

DeMoNcRaZy

Thryks