Upon inspection, I discovered the following SVG content:
<svg height="64" width="64" class="ng-star-inserted">
<rect rx="10" ry="10" style="fill:silver;stroke:black;stroke-width:5;opacity:0.5" x="0" y="0" height="64" width="64">
</rect>
<text alignment-baseline="middle" text-anchor="middle" x="50%" y="50%">
missing
</text>
</svg>
This code essentially creates a grey box with some centered text. However, when placed in a Bootstrap 4 structure next to an input field of type file, the centering of the text within the SVG seems to vary across different browsers.
The complete code snippet is as follows:
<li class="media">
<div class="mr-3">
<svg height="64" width="64" class="ng-star-inserted">
<rect rx="10" ry="10" style="fill:silver;stroke:black;stroke-width:5;opacity:0.5" x="0" y="0" height="64" width="64">
</rect>
<text alignment-baseline="middle" text-anchor="middle" x="50%" y="50%">
missing
</text>
</svg>
</div>
<div class="media-body">
<h5 class="mt-0 mb-1">{{getLabel()}}</h5>
<input class="form-control-file" type="file" type="file" >
</div>
</li>
It appears that the text "missing" is not perfectly centered - it is slightly offset to the left (in Firefox) just above the expected center. Adjusting the alignment from 50% to 32px works better for Chrome but in Firefox, ideally, it should be set at 34px. It seems like Firefox calculates the position based on the entire row height rather than the starting point of the image.
Referring to the screenshot provided https://i.sstatic.net/LDwNn.png,
Changing the alignment-baseline="middle" to center, hanging, or baseline did not resolve the issue either.
Is there a way to resolve this discrepancy so that the rendering is consistent across both browsers?