Vertical Alignement... Again (Public Link Inside)

Design help General
1

Hi,

i need some help about vertical alignement.

I would want my text to get vertically centered. I’ve tried the bartekkustra solution, but i surely did something wrong, as it still does not work…

Here’s the link:

Here’s the public link:
https://webflow.com/design/leda?preview=a6c0620238ced743d06ed1d5303b89c6

Here’s the code i’ve put in the BODY area:

<style=text/javascript>
    $(document).ready(function() {
    $('.hero-wrapper').css({
        'margin-top' : $(window).height()/2 - $(this).height()/2
    });
});
</style>

Here’s a printscreen of the webflow design area:

2560×1313 91.1 KB

I wonder if i mixed up something. Or maybe the problem is coming from that background picture ?

Thanks in advance for any help :smiley:

Pascal.

2

@bartekkustra someone’s summoning you here :smiley:

3

@vincent By your powers combined, I am here to help ;)

@helvetica Hello ;) I’ll try to help you out in here :slight_smile:

First of all, let’s clean up some code. Remove values from Hero Heading:

  • margin-top: auto
  • width and height: auto
  • border-radius: 0px
  • text-decoration: none

Now in the same object (Hero Heading) go to Typography and change the line-height from 84px to 1em.

Now… As you can see here:

1416×635 673 KB

the object hero-wrapper is aligned perfectly. The issue is with the Hero-Heading again. Change it’s position values to as following:

Now scroll down to the Effects panel, choose Transforms->Move and use values as shown:

Since you are using the very same trick on Hero-Wrapper you can remove the code from body. I see that it doesn’t work properly anyway. I can tell by there is no style="" element in html.

Good luck with this one ;)

2 Likes
4

How could I miss the 1em technique and the -50% translation one?

It’s neat because you do it entirely in Webflow.

It’s a bit less neat that it requires quite a bunch of clicks. How well does it work in Webflow if you affect these properties to classes to re-apply them easily on other elements?

5

@ bartekkustra:

Many many thanks, it finally works !! :smiley:

Thanks to have took some of your time to help me, especially by providing some printscreens, it’s greatly appreciated.

Now, though, if it works well on Chrome and FF, there’s a weird bug with IE 11, as shown below:

2560×1397 94.5 KB

The text is aligned at left… in spite of i’ve centered pretty anything. Do you have any idea ?

https://webflow.com/design/leda?preview=a6c0620238ced743d06ed1d5303b89c6

Thanks again, you rock ! :smiley:

6

Change it from display: inline-block to display: block and try then. IE is bugged as hell… I have to use some JavaScript code to make stuff work on IE - client asked for it. Only 1.4% ppl on Earth use IE so I simply don’t optimize if I don’t have to.

You’re welcome ;) I’m glad I could have helped.