Hello everyone. I have a text box whose text alignment should be centered. It only works with my CSS style 'textCenter' when 'width' is not set to 'auto'. But that's exactly what I want to have. When 'width' is set to 'auto', the text alignment is always on the left. Any ideas? Thanks in advance.
We are getting the scenes width / 2 and the text elements width / 2 then deducting the resulting text width from the resulting scene width.
This should then move the text box to a new left position where it will in the center of the scene's middle.
Thanks a lot Mark. Works perfect for me. Next step - I have to get it working in my daily working setup, and that´s a scaling environment using a scalewrapper. Tried to figure it out and I think, I´m somehow on the right track. Doesn´t work properly anyway... my never ending struggle with relative measures, getBoundingClientRect()... you name it What the heck am I doing wrong?
var myText = 'Bosnien und Herzegowina';
var scaleWrapper = document.querySelector ('.scaleWrapper');
var currentWidth= scaleWrapper.getBoundingClientRect().width;
var textDisplay = document.querySelector ('.textDisplay');
var textDisplayWidth = textDisplay.getBoundingClientRect().width;
textDisplay.innerHTML = myText;
hypeDocument.setElementProperty(textDisplay, 'left', ((currentWidth/ 2 ) - (textDisplayWidth / 2 )));