How do I align text to image?

Support
#1

I want to create the same setup as in the first image, however I am having trouble aligning the text and button to the right of the image as you can see in the second image. Is it best to use html or css for this? I have tried few different codes but cannot get it exactly correct and I cannot put another column where the text is.

#2

Hi There,

To make the image float on the left of your image, please add the left CSS to your image element:

Hope it helps :slight_smile:

#3

Thanks Thai, how ever I still have button and text wrapping around bottom of image

To stop that would it be better to use a div? and if so how would I do that

#4

Hello There,

Please also add this in the element css:

$el {
  min-height: 350px;
}

We would loved to know if this has work for you. Thank you.

#5

Many thanks, worked perfectly

#6

You are most welcome.
It’s good to know that it is working for you.

#7

Sorry just one more quick question, how can I align the image vertically in the center of column? have tried vertical align middle but may be missing something.

#8

Hello There,

If you want to align the image vertically, it is best that you change your set up. Your row columns should be 1/4 + 1/4 + 1/4 + 1/4. You can make the left and right columns as empty. Insert the image in the second column and the text element in the 3rd column. By enabling the marginless column, you may have the option to add vertical-align: middle; in the 2nd column setting’s inline css.

Hope this make sense.

#9

Yes it does make sense, the issue then though is I cannot have a blue border around the column or I should say 2 columns as you would have a blue vertical line between the image and text, maybe there is a way around that?

#10

OK figured that out, I can use the link sides to get rid of middle border, thanks

#11

I used below code in element CSS on column element and then image element but could not get image to move?

$el {
vertical-align: middle;
}

#12

Hello There,

You will have to use this:

$el {
   vertical-align: middle !important;
}

This will only work if the image is placed on its own column.

Please check out the test post I created in your site.

#13

Thanks, Looks good, will need to make new column for smaller screens as the 2 columns then start wrapping under each other and the border gets messed up. But that’s good for the larger screens, thank you for your help.

#14

You’re welcome!
We’re glad we were able to help you out.

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.