Centred text not working with Classic layout | XM Community
Skip to main content

Hi all,

I want to use the Classic layout for space reasons. But when I use classic layout, centred text doesn’t display in the centre of the screen, but on the left.

All help appreciated :)

Could you confirm if this query is regarding question text or header text?


@maybe : Wrap your text with a  tag and set its style to “text-align: center.” Here’s an example:

<div style="text-align: center;">
   Your centered text goes here.
</div>


@rgupta15 This is about question text. In particular, question text for a CAPTCHA question. The CAPTCHA displays in the centre of the screen but question text displays on the left.

@Sameer.65 Thanks for the suggestion. With this, the text displays as if it were centred, with line breaks in the right place, but the block of text still displays at the left of the screen. I should have mentioned before that this is for a CAPTCHA question.


@maybe 

If you’re using Captcha Question, you can use below CSS element if you have aligned it on center. Add it to your look n feel>style>custom CSS

.Skin .Captcha label.QuestionText {
width: 100%;
text-align: -webkit-center;
}

Hope it helps!

 

 


@Deepak  Thanks for the response. This has the same effect as centring with HTML.  Relative to the other text in the block, each line is centred, but it doesn’t centre on the screen. Attaching an image.

 

 


@maybe 

I believe some other CSS is overriding the code as I was able to achieve this with code mentioned.
Try including !important in front of CSS elements.
 

 


@Deepak Is that using the Classic layout? Strange. Even with no custom CSS, mine still displays on the left.


@Deepak Is that using the Classic layout? Strange. Even with no custom CSS, mine still displays on the left.

Yes it’s classic layout!


When previewing the survey through the Look & Feel, an !important is required for the centering to take. When previewing the survey through a Preview link, the centering worked without an !important. While it doesn’t look like the !important is needed for the live survey, I don't think it would hurt to have either. Try:

.Skin .Captcha label.QuestionText {
width: 100% !important;
text-align: -webkit-center;
}

 


@Tom_1842 My hero! I foolishly put !important in the wrong place. It displays perfectly now :)

Thanks all for your help :)


Leave a Reply