Center an absolute element below a div?

Issue

I'm trying to center a pargraph below a div (could be a square image for the matter). I understand that the easiest way to do it is to contain both the div and the text below it in a single container and use text-align, but in this instance I have a limitation where I cannot let the small image be contained in a container wider than that image.

Without centering the text it looks like this:

My code:

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

The reason why I cannot let the image be in a container is that I'm using ReactFlow where the handles should connect to the sides of the image without a gap. If I put the image and the text inside a div, the div will take the width of the text and thus it will naturally be wider than the image.

I tried centering the text below the image with absolute positioning, but with different paragraphs sizes, it won't be persistent in the center. Is there a away to achieve this without inserting the image/square and the text inside one div?

One last thing: the width of the image if constant, for example 100px

Solution

one way to do this is to get the coordinates of your two elements and then add margin-left: to adjust the position of the span

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>

Answered By - DCR