Custom HTML code to center piped text to right of image | XM Community
Skip to main content
Michael_Cooksey
Administrator
1 month ago
Solved

Custom HTML code to center piped text to right of image

C
Forum|alt.badge.img+3
Hi - just chatted with Qualtrics support and they directed me here. I have a constant sum question with one image in the question part and multiple images as the answer options. In the question part, the one image has piped text to the right of it, pulled from a text box from the previous question. It currently displays at the bottom right of the image. Ideally, I need it to display similarly to the constant sum answer options below, where the text box is at the image's mid-height and indented to the right. Qualtrics support told me this would require custom HTML code. Any idea how to write this code? Thanks!

Best answer by TomG

Put your image in a `<div>` that you float left and put your text in a `<div>` that you float right. Something like: ``` <div> <div style="float:left"><img src="imageurl"></div> <div style="float:right;vertical-align:middle">Text to right of image</div> </div> ``` You may need to add some more styles for width, etc.
View original

12 replies

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • 5938 replies
  • Answer
  • August 10, 2018
Put your image in a `<div>` that you float left and put your text in a `<div>` that you float right. Something like: ``` <div> <div style="float:left"><img src="imageurl"></div> <div style="float:right;vertical-align:middle">Text to right of image</div> </div> ``` You may need to add some more styles for width, etc.
C
1 person likes this
  • C
    catalyst
PeeyushBansal
Level 6 ●●●●●●
Forum|alt.badge.img+39
  • PeeyushBansal
  • Level 6 ●●●●●●
  • 1148 replies
  • August 11, 2018
please refer this page:- https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_img_align
Best Regards, Peeyush
C
Forum|alt.badge.img+3
  • catalyst
  • Author
  • 1 reply
  • August 11, 2018
Thanks Tom, that was helpful! I was able to get the piped text so it was indented over (not right next to the image), but it showed up aligned at the top of the image, rather than aligned at the middle. Not a huge issue, but if you have any idea why that might be, please let me know. Thanks again!
TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • 5938 replies
  • August 11, 2018
@catalyst - if you know the height of the image, try changing the right div height to match.
E
Forum|alt.badge.img+2
  • Eftychia
  • 9 replies
  • March 21, 2021

Hi, I'd like to display an image of a raffle ticket to all participants and change the number of each raffle ticket. I thought i could use an integer randomizer and piped text, but I do not know how I can display the randomly generated number on the raffle ticket image... Any help would be much appreciated!
I am attaching a screenshot of what my raffle ticket question would hopefully look like:
Screenshot 2021-03-21 at 16.01.48.png

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • 5938 replies
  • March 21, 2021

https://www.qualtrics.com/community/discussion/comment/35842#Comment_35842Make the raffle ticket image the background of a

that contains the piped random number.

E
1 person likes this
  • E
    Eftychia
E
Forum|alt.badge.img+2
  • Eftychia
  • 9 replies
  • March 21, 2021

Thanks for the swift reply, TomG!
Could you help me with 1) inserting a random number generator in the html code and 2) make this raffle ticket image the background of the

element? Here is the code I am working with. I am new to using html code, thanks for your help.

">https://i.pinimg.com/originals/70/57/12/705712ed65677724b5bac5c2af30b35f.png">

Number


E
Forum|alt.badge.img+2
  • Eftychia
  • 9 replies
  • March 21, 2021

PS. I managed to insert the random number generator, but my code now displays the random number below the ticket image, whereas I'd like it to be on top of the image. Any ideas of how I can make this happen?


">https://i.pinimg.com/originals/70/57/12/705712ed65677724b5bac5c2af30b35f.png">

${e://Field/Random%20ID}


TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • 5938 replies
  • March 21, 2021

You only need one

. Look at the link in my previous message. Hint: background isn't an html attribute; it is a style.

E
1 person likes this
  • E
    Eftychia
E
Forum|alt.badge.img+2
  • Eftychia
  • 9 replies
  • March 22, 2021

TomG I am still not able to figure this out, so if you could help me with the code that would be fantastic!

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • 5938 replies
  • March 23, 2021

Try:

${e://Field/Random%20ID}

where X and Y and the width and height of your image.

E
1 person likes this
  • E
    Eftychia
E
Forum|alt.badge.img+2
  • Eftychia
  • 9 replies
  • March 24, 2021

Thanks TomG, I am almost there... I tried different values for the height and width parameters (and also percents), but I only get to see a think stripe from the middle of the image. I attach a screenshot. Do you know why this may happen?
Screenshot 2021-03-24 at 20.16.09.png

https://i.pinimg.com/originals/70/57/12/705712ed65677724b5bac5c2af30b35f.png) center no-repeat; text-align:center; vertical-align:middle; color:#2980b9; width:100%; height:100%">${e://Field/Random%20ID}

Leave a Reply


Terms & Conditions