0
151
Views¿Centrar un elemento absoluto debajo de un div?
Estoy tratando de centrar un párrafo debajo de un div (podría ser una imagen cuadrada para el caso). Entiendo que la forma más fácil de hacerlo es contener tanto el div como el texto debajo de él en un solo contenedor y usar text-align , pero en este caso tengo una limitación en la que no puedo permitir que la imagen pequeña esté contenida en un contenedor más ancho que esa imagen.
Sin centrar el texto se ve así:
Mi código:
HTML:
<div class="block"></div> <p class="label">This text is a bit long</p>CSS:
body { padding: 5rem; } .block { background-color: blue; width: 80px; height: 80px } .label { }Codepen: https://codepen.io/omerh3/pen/oNqVjvV
La razón por la que no puedo dejar que la imagen esté en un contenedor es que estoy usando ReactFlow donde los controladores deben conectarse a los lados de la imagen sin espacios. Si coloco la imagen y el texto dentro de un div, el div tomará el ancho del texto y, por lo tanto, será naturalmente más ancho que la imagen.
Intenté centrar el texto debajo de la imagen con posicionamiento absoluto, pero con diferentes tamaños de párrafo, no será persistente en el centro. ¿Hay alguna manera de lograr esto sin insertar la imagen/cuadrado y el texto dentro de un div?
Una última cosa: el ancho de la imagen si es constante, por ejemplo 100px
2 answers
Answer question0
¿¿Te refieres a algo como esto??
body { padding: 5rem; } .block { background-color: blue; width: 80px; height: 80px; margin:0 auto; } p.label {text-align: center} <div class="block"></div> <p class="label">This text is a bit long</p>0
una forma de hacer esto es obtener las coordenadas de sus dos elementos y luego agregar margin-left: para ajustar la posición del lapso
let divOffsets = document.getElementById('a').getBoundingClientRect(); let divRight = divOffsets.right; let divLeft = divOffsets.left; console.log(divLeft,divRight) let spanOffsets = document.getElementById('b').getBoundingClientRect(); let spanRight = spanOffsets.right; let spanLeft = spanOffsets.left; console.log(spanLeft,spanRight) let divCenter = divLeft + divRight / 2 console.log(divCenter) let offset = divCenter - (spanLeft + spanRight / 2) offset = offset + "px" document.getElementById('b').style.marginLeft = offset; body { padding: 5rem; border:solid 1px red; position:relative; } .block { background-color: blue; width: 80px; height: 80px; } span{ position:absolute; } <div id = 'a'class="block"></div> <span id = 'b' >1234</span>