Streaming live at 10am (PST)

Inline-block vertical align


#1

Hi,

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.

Any suggestions?


#2

Hello @walfrido77

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.


#3

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!


#4

So… I did what you told following the other post code, but still does not work.
Anyone knows why?

This is the Website: http://life-2.webflow.io/

And below are the screenshot of what I’ve done.
I need the div with the picture on the left to be vertically aligned to the text on the right.

image

image

image

image

Can anyone please help me?


#5

Can you share your read only link please?


#6

I just found out what was the problem!
My class name had a space between words… so the CSS class did not work.
Not it is working perfectly.

Thank you so much for sharing your knowledge!


#7

I’m glad I could help.


#8

Hi @walfrido77

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.

Max


#9

Thanks for sharing the other post @walfrido77
Thanks for the in webflow answer @Maximosaurus


#10

Hi @Maximosaurus, this looks genious!! thank you so much for sharing!
For sure I’m gonna try this one also.


#11

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.


#12

Hey @walfrido77

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.

Hope it makes sens.

Max


#13

Can anyone comment on whether this is a valid criticism of flex?