center a title vertically so it sits...
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...)
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.
It's easy to overlook something you're not looking for.
Here's my S-Drive site with
examples of what can be accomplished in VSD.
Here's my CoffeeCup SCCP Shop with examples of what can be done.
This is a site I built for my work.(RSD)
This is a site I built for use in my job.(HTML Editor)
This is my personnel site used for testing and as an easy way to share photos.(RLM imported to RSD)
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)
Do you have a version on RLM?
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
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.