The code I'm working with currently looks like this:
<div id="img_preview_text_container" style="width: 376px; height: 75px; top: 156px; left: 50px; color: rgb(255, 0, 0);">
<div id="customOnePreviewText" style="font-family: Oklahoma; width: 376px; height: 75px;">FABO</div>
</div>
Here is the CSS styling used:
#customOnePreviewText {
margin: 0;
position: absolute;
}
#img_preview_text_container {
position: absolute;
display: flex;
align-items: center;
}
The text looks good as it is.
To dynamically fit the text into its container, I utilized a JavaScript library called text fit js.
After applying the text fitting process using this method, the HTML code becomes:
<div id="img_preview_text_container" style="width: 376px; height: 75px; top: 156px; left: 50px; color: rgb(255, 0, 0);">
<div id="customOnePreviewText" style="font-family: Oklahoma; width: 376px; height: 75px; text-align: center; white-space: nowrap;">
<span class="textFitted" style="display: inline-block; text-align: center; font-size: 80px;">FABO</span>
</div>
</div>
This is what I get now: https://i.sstatic.net/Tkuko.png
The text is no longer centered and there's extra space below. This was not an issue before implementing textFit.js. How can I remove the excess spacing and align the text in the center again?