First of all, I love Webflow. It changed my life and I am a big fan.
That said… I have a problem.
I am developing a web-site in team with a web-developer who is doing the API integration part of the site, while I build the layout on Webflow.
He asked me not to use Flex to vertically align objects because he says it is new and unstable and was causing bugs. So I am supposed to use only Blocks and Inline-blocks. I thought about using Rows (columns) to keep the objects aligned from the top. But he asked me to only use vertical-align: top.
I searched the Forum and found a topic where the Webflow crew says there in no vertical-align on CSS.
I downloaded the website, edited the CSS on Dreamweaver and the vertical-align worked perfectly.
The problem is, now I have to make all the code-editing outside the Webflow because there is no way to add this custom code into the webflow.
You can use the embed code component to add css styles to your site, just add the embed code component in the same level you need an element to be affected, add the class of your affected element and the css style you want, you will be able to see it even in preview mode.
Hi @aaronocampo, thannk you very much for the tip. I tried it, but it did not work for me…
Then I found this other post which explains how to add custom CSS using the HTML embed.
Hopefully now it will work fine.
Thank you!
Another way without any custom code (online basics webflow css settings) will be the following:
1- set the parent element of your inline block to position: relative
2- set the inline block to position: absolute
3- set the top property of the inline block to top: 50%
4- set the transform (move y) property of the inline block to -50%
It works because the transform property is calculated based on the actual size of the element and not his parent.
If you need to center horizontally as well you could use a combination with left: 50% and move x: -50%.
May be that will help you not going out of the boundaries of webflow.
Just in case anyone else is having the same issue, I found out the easiest way (at least the easiest for now).
Instead of adding individual embeds for each vertical aligned object, I created the classes and the code for them on the Custom CSS code at each page setup, so now, all I have to do it to give the object the class for the kind of vertical alignment I want.
I can explain that better if anyone needs it.
You could do this again only in Webflow without custom code.
(custom code is not in a separate css file but in the header or footer as a style tag (which is not the cleanest way to my opinion)
Regarding the way I mentioned before I will go like this :
1 - create a div and give it a class of center-align-parent (or what ever make sens to you) and set it to relative
2 - create 2 div inside the centering-parent div and give them a class of horizontal-align and vertical-align respectively
3 - set horizontal-align with absolut - left 50% and transform x - 50%
4 - set vertical-align with absolut - top 50% and transform y - 50%
Now you can delete all of them the classes are in your styles
That way when you want to center you can add the combo classes to what you want
So if you want something vertically and horizontally in the middle.
1 - add combo class center-align-parent to parent
2 - add combo classes horizontal-align and vertical-align to child which you want centered.
I might not be the most knowledgable on this but flexbox is widely supported by all modern browsers and I saw only issues on old versions of internet explorer with my projects using flexbox so far.
You can always refer to Can I use... Support tables for HTML5, CSS3, etc that will give you a good starting point on support of css properties (this is informative and not to be considered as 100% accurate).
As for the debate of supporting older browsers and technology when designing/developing website my position would depend on the content and the audience you are trying to reach.
If I was doing a website for a government service I will make sure that any kind of browser will display the content in a correct way even with windows 95 and very old version of IE otherwise I will probably overlook it a bit. (Again only my point of view and you can find endless debates around this)
As far as I’m concerned, Webflow is doing a very good job at making retro supported properties as you could see by opening the code export window on one of your project.
Thank you!
Just to make clear, his critics on Flexbox were not on browser support, but on integration with the ERP API we were using on this project.
Anyway, it was good to learn that a lot of what I was doing with Flexbox can be done with Block and Inline-block, and to get to know a little more of how all the CSS display options work.
