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