Align Middle/Left Align Text to Image | XM Community
Skip to main content

How do I middle align and left align this text to the image in the button?

I know I can use HTML code, but what does that code look like?

Firstly, left align all text to the image?

And then how do I center align the text to the image?

 

Can you please clarify it bit more. how and where you are using it and if you have any backend html script of it then please share.

@MaggieGentry - You should use a flexbox to do this.

@ArunDubey - I have added images to single-select questions. 

But want more space between the image and the text and I want all the text to align with each other.

 

Hi @MaggieGentry,

 

Based on your screenshots, I think you are looking for setup similar to below link. Instead of Images you may have to create Div element for text and manage it.  

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_grid_responsive

 

Hope it helps.

 

Thanks,

JB

See there are two ways.

  • Either you can use html table with one row and two columns. you can set the height and width of table as par your need. and then put the image under first column and text under second column.
<table style="width: 100%">
   <tr>
        <td style="width: 30%">  <img src="image URL" alt="xyz" style="width:100%"></td>
        <td style="width: 70%">Description of image</td>
   </tr>
</table>
  • Or you can use two div tags using style “float: left;” and div width in the ratio of 30:70%. this will align both divs side by side.
<html>
<head>
<style>
* {
  box-sizing: border-box;
}

.tr::after {
  content: "";
  clear: both;
  display: table;
}
</style>
</head>
<body>

<div class="tr">
  <div id="x1" style="float: left; width: 30%; padding: 2px;">
    <img src="image URL" alt="xyz" style="width:100%">
  </div>
  <div id="x2" style="float: left; width: 70%; padding: 2px;">
    Description of image
  </div>
</div>
</body>
</html>

 

@ArunDubey - how do you suggest I make the spacing between column 1 and column 2 “larger”

Is there something I can put in the table properties to expand/making the spacing larger between columns 1 and 2 but NOT the whole table?

Yes, you can pas style="border-spacing: 10px;" in <table> tag. If you want to add padding then you can pass style="padding:5px" in both <td> tags.

@ArunDubey 

I tried your above suggestion: border-spacing:10px;width:500px;

I don’t want the whole table padded - just the highlighted portion:

Thoughts?

Try use margin css property on table.

margin-top: 10px;
  margin-bottom: 10px;
  margin-right: 15px;
  margin-left: 5px;

Or you can use padding css property under td.

Discovered the Cell Properties section - instead of table properties.

Was able to update everything as needed within Cell Properties - without custom code.

Thanks all! 

Great, good luck!!

Leave a Reply


Terms & Conditions