Vertical Aligning a Paragraph - Post...

User 307522 Photo


Registered User
14 posts

Hi, am experimenting with the Responsive Content Slider and can’t work out how to vertically align a paragraph to the middle of its container.

I basically want a picture on the right and to the left of it a paragraph of text vertically aligned centrally to that picture. Have set every single element to ‘middle’ in the position setting - but the paragraph always stays aligned at the top… I’m sure it is something simple I’m not doing right…. :/

Thanks :)
User 185561 Photo


Registered User
102 posts

Did you try the topography option and align the text in the middle?
Once you accomplish the impossible, then you can move on to the hard stuff!
User 307522 Photo


Registered User
14 posts

Hi Chuck, thanks for your reply.

I can get the paragraph to align left, centre, right and justify - but can't get it to align vertically. In the Position pane there are options to align baseline, middle, top, bottom etc. It's this I don't seem to be able to get to work....
User 2088758 Photo


Senior Advisor
3,086 posts

Hi Will try this.

Goto the container you want your text Vertically Aligned. Set the Display property to Flex. Then set the Items to center.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 379556 Photo


Registered User
1,533 posts

I haven't tried Steve's suggestion, which appeared while I was preparing the following. The following may, however still prove useful.

If I have understood the matter correctly, the problem is vertical alignment of a paragraph. I have done it as follows.

(a) There are the following: a Slides Container and a Slide. Into the Slide I placed a 'container set', being a Master 1-1 Container element (which is a container with two 50%-width containers in it).
(b) I placed the paragraph in the left such inner container, and the picture in the right inner container.
(c) In the Position section of the Design panel I set the Master 1-1 container to Display:Table.
(d) In the Position section of the Design panel I set the inner containers to Display:Table-cell, and the Vertical Align of those inner containers to 'middle'.

Frank
User 122279 Photo


Senior Advisor
14,447 posts

Hi,

I don't use the content slider, but attached I have a working code. Maybe you are able to use it in RCS.

Added later: I see that Steve is mentioning flex. I wasn't aware that flex can be used in RCS. But if that is possible, it's much easier than what I wrote.
Attachments:
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 307522 Photo


Registered User
14 posts

Hi Frank - that's is exactly what I needed! Very clearly written - Thank you!

Thanks also for the reply Steve - although I couldn't find the Flex property. Will keep searching...

Many thanks.
User 2088758 Photo


Senior Advisor
3,086 posts

Personally I would avoid Tables at all cost. Not even sure why they are included as an option.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 307522 Photo


Registered User
14 posts

Hi Inger - just seen your post. Will take a good look. Many thanks.

Still looking for the Flex Display Property. Not sure it is an option with RCS...
User 2088758 Photo


Senior Advisor
3,086 posts

Sorry for the confusion. There is no flex on RCS.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.