Why is there no GUI for the vertical-align property?

[GarlandBriggs]

Why is the possibility of vertically aligning inline block elements omitted from Webflow? Is there a rationale behind this that should be obvious to us?

Note: I’m hoping for an answer from the Webflow staff here. Please don’t bombard me with other ways of doing vertical alignments. Also I’m aware that you can insert CSS in Webflow.

[vincent (Vincent Bidaux)]

Hi!

There actually is a vertical centering method in the UI, when you use Flexbox.

But that’s true apart of that, there is none.

And yes there is a rationale for that.

So, for Flexbox, I let you discover how it works. Give Flexbox as a dislau property to an element and you can vertical center its content. Learn Flexbox at www.flexboxgame.com

Long story short, Flexbox is the easiest way to center vertically.

.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

So why isn’t there a vertical centering button? Because there is no vertical centering feature in CSS. Why? Because in many if not most of the case, due to the flow of elements, HTML is incapable of calculating the height of an element, hence not being able to vertical center its content.

There is a great method to vertical center:

top: 50%;
transform: translateY(-50%);

If you know the height of the parent element, you can also use this method:

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}

So why no UI? Because everything* in the style panel refers to a CSS feature. There is no “magic” buttons. So having a “center vertically” button will mean you click it and it adds many other properties at different places in the Style panel and then it’s very opaque for the user.

*now you’re saying that there IS a magic button for horizontal centering. That’s true, it’s an exception. What it does is give the selected element display block and auto margins. But those 2 properties are close to the button and quite obvious so it’s not that bad. Would be more problematic with the vertical solution.