Vertically Center Text? / Category Link

Several related questions regarding setting up a category flow.

  1. “Portfolio” in the main Nav should link to a landing page with all our project categories. This works. But then I’d like each category photo to link to its respective category. How?

  2. Is there a way to center text vertically in a text box which covers 100% of the container behind it? I want a hover effect that when you roll over the photo, the whole photo grays out, with text in the center.

  • I’ve tried using a very large line height, which works… until you have text that needs to wrap
  • I’ve used the 50%/-50% spacing trick, but this makes a small text box which does not cover the whole photo
  • I’ve tried placing a div block behind the text and doing a hover effect on both, but this produces a sequential-hover effect (whole photo grays out, then only the space behind the text grays out) which is not what I want.

You can see the flow & styling working the way I want here (ignore the hover styling on this page; click on any sub-page to see what I’m trying to do): https://sdg785.wixsite.com/sdgarch/portfolio


Here is my site Read-Only: https://preview.webflow.com/preview/ashleys-first-project-825c72?utm_source=ashleys-first-project-825c72&preview=85c879d117521a01b82175538c4adec5

Published: http://ashleys-first-project-825c72.webflow.io/portfolio

1 Like

Category link

must to know:

Next:

vertical align by flexbox

  1. Its hard to understand your specific issue (Add screenshot). A lot of options for this - anyway vertically align by flexbox is very easy (Two clicks + remove the margin-top/bottom from the heading):
    Center elements with flexbox | Webflow University

The idea by regular CSS:
https://stackoverflow.com/questions/25311541/how-to-vertically-align-text-inside-a-flexbox

1 Like

Ok. Flexbox solved the centering issue. Super easy, once I knew what I was looking for. Thank you!

However, none of the stuff you linked about the collections seems to apply. I need the items in a collection list to each link to a different collection. Should I not do this as a collection list but just have freestanding images linked where they need to link? Either way, I can’t figure out how to link to a collection outside of a collection list.

Also, how do I link to a specific item in a collection (not in a collection list - I’m specifically thinking of the Featured Projects on the homepage, which are just images)? It won’t let me copy the item’s URL.

Flexbox great.

URL combinations

Collections list and custom URL. No way to combine this :slight_smile:

Or:

  • You select bind link to “collection page” for all items

  • Or you create “custom feild” → “my url” and bind this feild in the collection.
    image

By javascript i could solve this for specific cases.

I might try option 2, but I can’t find anywhere to link to collection template pages. (I know this is basic info that must be out there somewhere, I just can’t find it!)

folder name

Set parent (Folder name her):
/blog

page slug

page slug under post setting (Webflow auto-generate this depend on page name)

page named: hello world
the slug is hello-world

relative path:
/blog/hello-world

absolute path:
https://mydomain.com/blog/hello-world