Streaming live at 10am (PST)

Vertical Alignement... Again (Public Link Inside)


#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:
http://leda.webflow.com

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:

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.


Can't see the background image of a section
#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 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:


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 ;)


#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:

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.


#7