Vertical alignment

Community resources Show & Tell
1

I created a script that can be found here ‘http://outboxed-dev.net/scripts/webflow/vertical-align.js’.

If you include it to your site and add a ‘vertical-align’ class to any element it will align it vertically (and horizontally) to its parent element as long as the parent has (offset) height.

http://outboxed-demos-dev.webflow.com/positioning/vertical-align is a demo page with nested aligned elements.

It will work for only one element so use it wisely.

100% Webflow friendly :smile:

6 Likes
2

ooohh… nice dude, very nice and handy, tks

1 Like
3

Let me know if you use it in production level. Thanks for the reply (y)

4

Nice one.

What would be the benefit of your JS solution compared to the one I use: I create a class ‘vertical-aligned’ in webflow, I set the parameters to top:50% and translate-x:-50%. Works pretty well too.

5

There is no other benefit rather than this: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

‘’ As a few people have pointed out, this method can cause elements to be blurry due to the element being placed on a “half pixel”. A solution for this is to set its parent element to preserve-3d. Like following: ‘’

And the fact that this solution is more geeky :stuck_out_tongue_closed_eyes:

6

Oooh I didn’t know, very good to know! Thanks for the in-depth on this (:

7

I had the blurring issue as well so I end up with this solution. Let me know if you use it anywhere.
I will try to extend it more in the near future.

8

One more reason to use JS instead of CSS3 can be found in the comments section of the above blog post.

‘‘This could have been the holy grail of vertical centering, but it seems to be causing text antialiasing issues during transitions, which is a big problem.’’

9

It’s very time consuming to fight against the blur, espcially text blur when you start to have many interactions/motion.

Everybody one the web has one solution that work for them and I end up with working code that I never fully understand and that ony does 99% of what I want (:

Last site I’m working on, I’m ending with this CSS custom code:

{
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
-webkit-font-smoothing: antialiased !important;
font-smoothing: antialiased !important;
}

10

When antialias start to mess with things I usually notice it very fast… and so far never this CSS centering method did horrible things on my designs… I’ll be extra carreful now, and will give a try with your JS solution.

11

Maybe you’ll never have a problem. It’s just me that I like programming solutions, coming from a c++ background and been into the web industry since the ‘table’ era :smile:

12

I still have nightmares about tables.

Once a year I’m forced by a client (or: can’t refuse) to make a marketing email template and it’s like it’s all 1996 again and I cry and I want to die and I install Dreamweaver ‘just to see if it’s any better now’ (it’s not, it’s worse) then I want to make clay puppets out of some Adobe’s devs and there’s always a reason not to use Mailchimp. (Except this year I dropped $29 in an app specialized in marketing email templates. It’s just a table maker :smiley: )

2 Likes
13

Verrrry Sweet :slight_smile: Nice job @christos_outboxed! I

1 Like
14

Thank you @cyberdave :smiley: I am a huge fan of webflow. You did a great job!

15

I can feel you man! That’s why my partner and designer (the illustrator ones) of the company now designs directly to webflow, so that I am here only to fix things… :stuck_out_tongue:

1 Like
16

I’m lost. This function is SO awesome, that I want to use it for multiple elements. Isn’t there a way to not execute it for one element, but for more?

17

[quote=“Diu, post:16, topic:9859”]
I’m lost. This function is SO awesome, that I want to use it for multiple elements. Isn’t there a way to not execute it for one element, but for more?
[/quote] You can use it for ONE element inside a container, but for many elements inside your page :wink:

1 Like
18

Sorry for being a complete noob, but can we have a step by step on how to implement this?

At the moment I’m adding:

to my footer custom code. Is this correct?

then I’m adding “vertical-align” as the last class of the item I want to align

I don’t know what you mean by this:
“as long as the parent has (offset) height”

I’ve tried a few things but I can’t get it to work.

Thanks

Edit: got it working, for some reason the class hadn’t been attached to my object.

19

Hello mowgli!

You can either add a script element or grab the code as it is and place it anywhere in your js code. Here is a quick example:

<html>
...
<body>
<div style='height:500px;'>
<div class='myclass vertical-align' >Blah blah blah</div>
</div>
...
<script src='http://outboxed-dev.net/scripts/webflow/vertical-align.js'></script>
</body>
</html>

The element with the vertical-align’ class has to be the only element inside its parent and the parent has to have width and height (either specified by absolute values or percentages).

Hope it helped you!

20

Is there a way to do vh vertical-align purely in CSS via webflow GUI ? :
http://fiddle.jshell.net/wdnQL/

.graphic {
    display:block;
    height:100vh;
    position: absolute;
    top:0;
    bottom:0;
    width: 100%;
}

.graphic img{
    vertical-align: middle;
    width:100%;
    display: inline-block;
    height:50%;
    position: absolute;
    top: 0;
    bottom:0%;
    margin: auto;
}

and/or is there a miserable caveat to such a method ?