Search code examples
cssright-to-lefttext-aligntext-indent

text direction RTL and text align center is not working

i am having some difficulty in rendering some inputs center. I am using the RTL direction with some offset of indentation.

But when text-align center it is taking the indentation size into consideration thus center off the screen.

https://codepen.io/anon/pen/PKPrOx

.star-cb-group {
  font-size: 0; 
  unicode-bidi: bidi-override;
  direction: rtl;
  text-align: center;
}

Can anyone help to point me to the right direction on how to resolve?

Thanks

Rick

Solution

  • The easiest way would be to remove the numbers from the labels and remove the text-indent.

    https://codepen.io/anon/pen/wqKLxb

    If you must keep the numbers in there you could remove the text-indent and hide the numbers by setting the labels to visibility: hidden; and setting the ::before elements to visibility: visible;

    https://codepen.io/anon/pen/EvVBdX