Vertically Aligning two columns in a row

[adamlaviguer]

I’ve created a row with two columns. The left column holds a Menu module, while the right column holds a Photo module. I want both of these modules to be vertically aligned to the center of the row. Even using CSS according to several other examples I found on this forum, I am unable to achieve the desired result.

Here is the row in question:

You’ll notice that the Menu is aligned to the start of the row.
I’ve tried the CSS from this post to no avail:

Is there any setting for column to align content vertically center?

Hey Pratik, There is no such setting for that in BB unfortunately, but you can achieve that via custom CSS. Try adding an extra class to the row or column you want this to apply, then add the CSS snippet below, changing fl-center-content with the class you’ve added. This should work on columns set to equal height, like what you have on your screenshot. fl-center-content .fl-col-content { align-items: center; justify-content: center; -webkit-align-items: center; -webkit-b…

I did indeed change the class names to match my modules, but it didn’t work. Here is my attempted CSS:

.page-subheader-picture {
/*transform: scale(1.2,1.2);*/
  align-items: center;
}

.page-subheader-menu {
border-right: 1px solid gray;
/*width: 65%;*/
align-self: center;

}

.page-subheader {
align-content: center;
align-items: center;
align-self: center;
justify-content: center;
}

[avanti (Emmanuel Soyer)]

You need the items direct parent to display: flex; in order the align-items: center to work.
Did you check this?

[adamlaviguer]

Hey, thanks for the quick reply. Yes, I did try that and it did not give the desired result. See screenshot below:

Making it Flex simply reduces the container from Full Width while still not fixing what I want. For reference, this is the class I modified:

.page-subheader {
display: flex;
align-content: center;
align-items: center;
align-self: center;
justify-content: center;
}

**I am aware the screenshot is different than the one originally posted. Both pages have modules with the same classes.

[avanti (Emmanuel Soyer)]

It depends on the containers hierarchy in the markup, hard to tell without accessing the page code.
An URL to share?

[adamlaviguer]

Unfortunately I’m building the site offline at the moment, so no URL to share. However, I did make a breakthrough on Friday. I traced back the container hierarchy in the markup and added css for the “fl-row-” and “fl-col-group” classes. Here’s the code:

/Did I do it?/
.fl-row- {
display: flex;
align-items: center;
align-content: center;
}
.fl-col-group {
display: flex;
align-content: center;
align-items: center;
}
.page-subheader-menu {
border-right: 1px solid gray;
}

It’s important to note that for the row class, there has to be a hyphen after the ‘row’, otherwise it doesn’t work right. Here is a screenshot with the result I desired:

[adamlaviguer]

The real solution ended up being the ability to make columns equal height and align them center via Beaver Builder, not CSS. I never realized that there was an edit column settings button. That was the solution to so many of my woes.