This may have been covered in another thread, if so please point me to it:
How can I set a row to full height but have the content aligned to the top? It seems like poor functionality to have vertical centering when the row is set to ‘full-height’.
Hey Doug Sisco,
I see that you’ve marked this thread as resolved. Glad that you made it work. Enjoy BB and let us know if you need anything further. 
Thanks!
KC
Hey Doug! Thanks for reaching out with your question. I believe we default to vertical centering, but you’re right, this isn’t as flexible as it could be.
We’ll see what we can do. Also, if you have a minute, this would make a great feature request:
Okay Doug, I have an update. Happy to say this is something we’re working on! No ETA yet, but we’ll get it out as soon as possible.
Hi Robby,
I’m currently working on a project that needs a text element a certain distance from the top of a FULL HEIGHT row. Centering the element vertically on the page is not appropriate. It needs to be a fixed distance regardless of page height.
Is there something you can provide in the form of some custom CSS or other method? Just wondering if their is a workaround or do we need to wait for a future update for the permanent fix?
If it’s only available via an update do you know how long this will be - just so I can have a rough idea on the timing in regards to my project - thanks.
Hi Ray,
This will be available in an update after the 1.7 release. For now, this CSS should do the trick…
.fl-row-full-height.fl-row-align-center .fl-row-content-wrap {
align-items: center;
justify-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-align: center;
-ms-flex-pack: center;
}
To make that work you’ll want to give any rows that need it a class of fl-row-align-center in the row settings. Let me know if you have any questions about that.
Justin
Actually, I just goofed. That is the code to align them to the center. Change all instances of center to inherit and it should align top. Sorry for the confusion!
Justin
Thanks heaps Justin - PERFECT
You’re welcome! I’m glad it worked
Hello,
I am just trying to achieve the same thing with no result.
The page is http://en.thecrazytravel.com/, and I want it in the last list at the bottom of the page, to get that list align vertically so no matter how wide is the screen the list or the photo are always centered.
I added this to my custom css:
.fl-row-full-height.fl-row-align-center .fl-row-content-wrap {
align-items: inherit;
justify-content: inherit;
-webkit-align-items: inherit;
-webkit-box-align: inherit;
-webkit-box-pack: inherit;
-webkit-justify-content: inherit;
-ms-flex-align: inherit;
-ms-flex-pack: inherit;
}
And I applied the class fl-row-align-center to the row.
Thanks,
Pablo
I’m also interested in following this…
I’m having a hard time working out how to place content on a row that has an image as the background. Tweaking the borders and margins seems a fair bit hit and miss & would love to have a better understanding of it!
I added this CSS, but to me it doesn’t seem to have any affect to me either…
Cheers, Dave
UPDATE2 -I take it all back, it works fine now - I had some padding in a column setting I was experimenting with, once I removed that my Heading appears exactly where I want it…
Thanks so much - Dave
UPDATE, I just re-read the thread and missed the part about adding the fl-row-align-center class, so I did that, and a heading I had placed on the column moved up a bit, but only a small part of the column height - By the way, I have ‘Height’ set to Full height - else things seem to be worse getting things aligned nicely!
Hey Pablo,
The code Justin gave above only works when you have Full Height enabled, and if you want the items not to be centered vertically. For your case, you could try the code below instead.
#fl-row-align-center .fl-col-content {
align-items: center;
justify-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-align: center;
-ms-flex-pack: center;
}
Dave,
Do you think you can share the URL to the page in question so we can take a look?
Ben
Thanks Ben, I realised later, that’s why I open the other post. 
It works, cheers!
Glad to hear it worked for you, Pablo! Enjoy!
Ben
Hello Ben,
For some reason it doesn’t work in both rows, only in the first one. What should I do?
If you check my homepage here: http://en.thecrazytravel.com/
The last rows at the bottom, where you had the image and 3 icons on the right, those are vertically centered.
But the next row with 3 icons and a girl cycling, those ones don’t get vertically centered. Both rows with the same class.
Am I doing something wrong?
Hey Pablo,
You’re placing it as a class, the code I gave you was for an ID. If you want to use it again, you might want to change them both to a class, since IDs can’t be used twice. Use the code below, then remove the fl-row-align-center ID from the first row, and make it a class instead.
.fl-row-align-center .fl-col-content {
align-items: center;
justify-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-align: center;
-ms-flex-pack: center;
}
Ben
Thanks, that’s great. I didn’t realised.
Could I do this same thing for aligning everything to the bottom for full height rows?
I created a design where all pages start with a full height (full screen) image, and I always put an arrow at the bottom of it linking to the rest of the page. I set it up with a massive padding on top, but it would make more sense to do it this way, since that way I can make sure it always shows at the bottom no matter the screen.
Hey Pablo,
You could try using the snippet below.
.fl-row-align-bottom .fl-col-content {
-webkit-align-items: flex-end;
align-items: flex-end;
}
Ben
It didn’t seem to work, I used it for the arrow here:
http://en.thecrazytravel.com/maps/bicycle-touring-around-the-world/
It got aligned in the middle.
Ah, sorry about that. This one should do it!
.fl-row-align-bottom .fl-row-content-wrap {
-webkit-align-items: flex-end;
align-items: flex-end;
}
Ben