center a title vertically so it sits...

User 7433 Photo


Registered User
42 posts

I have 2 columns; each 6 wide of 12.
If I have an image on the left; I want the Title on the right to be somewhere not so close to the top.
It is fine for the title to sit on the top if you are looking at it from a tablet or a smartphone; But, if you are looking at it with a computer wide screen the title floating on the top just doesn't look right.
I am guessing that the only way to do this is to add margin or padding from the top...Since there is no "center vertical"
Is this correct?
(As this would be a css limitation...)
User 187934 Photo


Senior Advisor
20,245 posts

Hi Greg.
I would float the title right and add top margin until it appears where you want it. Then as you narrow down you can remove the float and reduce the margin.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 7433 Photo


Registered User
42 posts

I figured I would have to make it work similar to that, but I am using 2 columns and just reducing the top margin where the title sits... I don't think float right is absolutely necessary is it? This way I also have the title centered horizontally in the column... So in each size for the different views all I need to do is reduce the top margin spacing.

On the lower resolutions, such as smart phone or tablet, I increase the column size so it is full page (12) instead of half (6)
User 122279 Photo


Senior Advisor
14,565 posts
Online Now

Greg, yould you post an url to your site? It helps seeing the problem.
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 122279 Photo


Senior Advisor
14,565 posts
Online Now

Don't know if it is something like this you are after. See attachment.
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 7433 Photo


Registered User
42 posts

Hi thanks for that, however I am using Responsive layout maker, not Responsive site designer...
Do you have a version on RLM?




User 271657 Photo


Ambassador
3,816 posts

Maybe you could put the image and title in a row as an unorded list, then after export, add some Flex-Box code in there and to your custom CSS?
So you would make that row a flex-container and each <li> would be a flex-item, aligned along the middle axis.
See an example here:
http://www.sketchingwithcss.com/samplec … tml#center
You can set the items to be equal width, or vary them (picture twice as wide as title, for example).

You can switch the items to a column for mobile screens, and change their order if needed, for example:
Full screen: picture left and title right
Mobile: title top and picture bottom

No need to mess with margins and positioning at various breakpoints ;)
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com

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.