0
533
Vistas¿Cómo centrar un ícono de fuente impresionante sobre una imagen en bootstrap 3?
Estoy tratando de centrar un ícono font-awesome sobre una imagen en bootstrap 3 .
Aquí está el código de imagen contenido en un div:
<div id="quickVideo"> <a data-fancybox href="https://player.vimeo.com/video/153113362?autoplay=1&color=54b3e4" class="adminDemoVideo"> <img src="~/Images/..." class="img-responsive"> </a> </div> Podría hacerlo usando ::before en el elemento div, pero el problema aquí es que no responde de forma predeterminada.
.adminDemoVideo::before { font-family: 'FontAwesome'; content: '\f04b'; margin-top: 1.35em; margin-left: 2.8em; color: white; z-index: 1000; font-size: 50px !important; position: absolute; padding-bottom: 3px; padding-top: 3px; padding-left: 25px; padding-right: 15px; background-color: rgba(23, 35, 34, 0.75); border-radius: 5px 5px 5px 5px; }Así es como se ve en el tamaño de la pantalla del escritorio:
Cuando lo convierto en un tamaño de vista móvil o de tableta, simplemente se distorsiona debido al margen, etc., como se muestra a continuación:
¿Hay alguna forma de solucionarlo sin saber el tamaño de la pantalla? No me importa si la solución está en css o javascript o jquery .
Espero que esto no esté duplicado, pero no encontré ninguna solución adecuada aquí ...
Gracias por adelantado.
1 Respuestas
Responde la pregunta0
Esta es una pregunta superpuesta común. La respuesta típica es usar posicionamiento absoluto con traducir dentro de un padre posicionado relativo.
- Asegúrese de que el padre tenga
position: relative;para que el elemento de superposición de posición absoluta no termine en algún lugar donde no lo desee. Estamos conteniendo la superposición al hacer esto. - Aplicar
position: absolute;al elemento superpuesto. Aplicar50%a laleftytop. Esto lleva la esquina superior izquierda del elemento superpuesto al centro del padre. - Utilice
transform: translate( -50%, -50% );para mover la superposición hacia arriba y hacia la izquierda el 50% de su ancho y alto. Ahora el centro de la superposición está en el centro del padre.
@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' ); @import url( 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' ); .adminDemoVideo { position: relative; display: inline-block; } .adminDemoVideo::before { content: '\f04b'; z-index: 5; position: absolute; left: 50%; top: 50%; transform: translate( -50%, -50% ); padding: 3px 15px 3px 25px; color: white; font-family: 'FontAwesome'; font-size: 50px !important; background-color: rgba(23, 35, 34, 0.75); border-radius: 5px 5px 5px 5px; } <a href="https://player.vimeo.com/video/153113362?autoplay=1&color=54b3e4" class="adminDemoVideo"> <img src="http://placehold.it/1200x800/fc0" class="img-responsive"> </a> Tenga en cuenta que la imagen que el ancla está envolviendo creará una pequeña cantidad de espacio en blanco que queda para un descendente en el texto, por lo que técnicamente no estará 100% centrado verticalmente. Si esto es un problema, puede eliminarlo configurando la imagen para display: block; .