Hi from Portugal,
I know webflow dont have vertical-align, but can someone find me a workaround for this exemple.
I have a box with fixed with and height, if i have a title with 2 lines, the vertical alignment is OK.
The problem is when i have 1 line, the simple solution is to insert more padding, bit inserting more padding will “destroy” the 2 line box.
Can someone had a similar problem?
tks
Rui
Hey (from Poland)! 
I’ve already spoke about that here (link). You can look at the features on my custom-site: http://bodyheight.webflow.com/
Good luck!
Hi @Rui_Almeida, there is no way to center blocks of text using CSS. It’s possible with Tables (too old) and with Flexbox (too new) but those are not supported.
@bartekkustra provided a way to do this dynamically with javascript (jquery implementation) which is more advanced/involved. You can try that out if it’s really necessary. I’d stick with using classes, padding and margin to achieve desired vertical alignment.
Let me know if this helps!
It’s actually simple math rather than advaced jquery techniques Put this code in Custom Code section in Dashboard and set proper classes on your website Good luck!
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
ch = $('.container-class').height();
ph = $('.text-class').height();
dynamicpadding = ch/2 - ph/2;
$('.text-class').css('padding-top', dynamicpadding);
</script>
Hi bartekkustra,
Tks for the help, but it did not work 
I did like you say, paste the code in the Custom Code but nothing apend.
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
ch = $('.contentItem').height();
ph = $('.titleBox').height();
dynamicpadding = ch/2 - ph/2;
$('.titleBox').css('padding-top', dynamicpadding);
</script>
Show the troubleshooting link here, please
yep, sure.
First of all, I just read and realized by reading your code, that webflow adds jquery link automatically at the end of the code right before the </body> tag.
Next… Your code goes like this:
“There is a block with height set that contains image and another block in which there is a text.”
In that case I’d do something else here.
The whole block has 233px height. There is a 150px image at the beginning and the rest is a block for text. We have to find the empty place heigh, so we have to measure the titlebox height as follows: tbh = $('.titlebox').height(); Then we have to find out the difference between the content height and the image + titlebox height: difference = ($('.contentitem').height() - (tbh + 150)); The result is very useful! 
All you have to do now is to set the margin-top and margin-bottom for those:
$('.titlebox').css('margin-top', difference/2);
$('.titlebox').css('margin-bottom', difference/2);
I understand it’s quite messy so far, but I wanted to tell you the way I’m doing that Here is the full code:
<script>
$(document).ready(function() {
tbh = $('.titlebox').height();
difference = ($('.contentitem').height() - (tbh + 150));
$('.titlebox').css('margin-top', difference/2);
$('.titlebox').css('margin-bottom', difference/2);
});
</script>
I believe it could be shorten to as following, but I wouldn’t put my head on it
<script>
$(document).ready(function() {
$('.titlebox').css('margin-top', ($('.contentitem').height() - ($('.titlebox').height())));
});
$('.titlebox').css('margin-bottom', ($('.contentitem').height() - ($('.titlebox').height())));
});
</script>
Gosh, writing code directly on forum is hard… 
Right before the ???
Edited, I’m so sorry. Forgot to code the </body> tag
It worksssss, you rock !!
After inserting your code, it did not work, but after some minutes cracking my head, i found 2 problem’s.
1º - You right, webflow insert the javascript in the end, after i export the code i have do put in the top.
2º - This one is curious, webflow transform all name classes to “small”, sorry my English.
I normally i do my classes like this “titleBox” “bigPicture”, the first letter of the second word is always CAPS, its more easy to read.
Your code was nor working because webflow “cleans” all CAPS. Just realize that.
tks very much
Glad i could’ve helped 
if there is anything I could help with jQuery I’d be more than happy to get you through it.
Hi guys! I’d like to point out that it is not necessary to add an additional jQuery library to your page. Adding a second jQuery script would add an unnecessary 100k to your page. You can access Webflow’s version of jQuery in any custom embed or <head> script.
Here’s an updated snippet of code, which uses Webflow’s version of jQuery:
<script>
var Webflow = Webflow || [];
Webflow.push(function () {
var inner = $('.title-inner');
var offset = ($('.title-parent').height() - inner.height()) / 2;
inner.css({ 'margin-top': offset, 'margin-bottom': offset });
});
</script>
Simply replace ‘title-inner’ and ‘title-parent’ with your class names.
More tips on Webflow.js can be found here:
Nice tip Danro, 100K is to much just to fix something.
Also, here’s an easy way to do it with current Webflow CSS functionality:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Note: you have to set the parent container to have a pixel height (like 200px for example) and give the element you want centered these CSS properties.
Source: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
@danro shouldn’t there be
var offset = ($('.title-parent').height()/2 - inner.height()) / 2;
?? I’m 100% it should…
Any hack to get this to work correctly in Safari? Or, will I need to script this for cross browser compatibility?
Example: http://biergarden.webflow.com/
Thanks @thesergie! Is this solution IE9-friendly?
I could be wrong (came across that solution just two days ago) but pretty sure that it works across the board pretty much.
One thing to note is further down the page they talk about doing this :
.element {
position: relative;
top: 50%;
transform: perspective(1px) translateY(-50%);
}
The perspective(1px) being the important part to note so that you don’t get any blurred elements due to the maths trying to shift the content onto a half-pixel.
Mark