MIddle-align question choices that contain an image and text | Experience Community
Skip to main content
Question

MIddle-align question choices that contain an image and text


Forum|alt.badge.img+6

I have a question where I combined an icon and a text but the text by default is bottom-aligned vertically. How do I make it middle aligned?

 

3 replies

Mishraji
Level 4 ●●●●
Forum|alt.badge.img+18
  • Level 4 ●●●●
  • October 13, 2026

​@rarcega ,

  1. I use a table (3 rows X 2 columns).
  2. The text goes in 2 row of 2 column.
  3. The cells of first column are merged together and then the image is added.
  4. The image is right aligned and text is left aligned.
  5. The borders are hidden. 
  6. Done.

Below is the code for reference.

<table border="0" cellpadding="1" cellspacing="1" style="width:80px;">
<tbody>
<tr>
<td rowspan="3"><img height="35" src="https://brandId.co1.qualtrics.com/CP/Graphic.php?IM=imageId" style="width: 40px; height: 35px; float: right;" width="40" /></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;Hello</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</tbody>
</table>


 

 


Forum|alt.badge.img+6
  • Author
  • Level 2 ●●
  • October 13, 2026

​@rarcega ,

  1. I use a table (3 rows X 2 columns).
  2. The text goes in 2 row of 2 column.
  3. The cells of first column are merged together and then the image is added.
  4. The image is right aligned and text is left aligned.
  5. The borders are hidden. 
  6. Done.

Below is the code for reference.

<table border="0" cellpadding="1" cellspacing="1" style="width:80px;">
<tbody>
<tr>
<td rowspan="3"><img height="35" src="https://brandId.co1.qualtrics.com/CP/Graphic.php?IM=imageId" style="width: 40px; height: 35px; float: right;" width="40" /></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;Hello</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</tbody>
</table>


 

 

I tested the code and made some changes to the width and height because the icons do not have the same size. I noticed that it adds whitespace before and after the choice.

<table border="0" cellpadding="1" cellspacing="1" style="width:auto"><tbody><tr><td rowspan="3"><img src="https://loyaltyone.yul1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_jJaAjROKbsqMAbc" style="width: auto; height: auto; float: right;" width=100% height=100%/></td><td>&nbsp;</td></tr><tr><td>&nbsp;Household Member 8: </td></tr><tr><td>&nbsp;</td></tr></tbody></table>

 


Mishraji
Level 4 ●●●●
Forum|alt.badge.img+18
  • Level 4 ●●●●
  • October 14, 2026

​@rarcega ,

 

The whitespace is due to the width attribute (width:auto). You can set a fixed width considering the maximum length of option choices.