Centering Flexible Columns within a module group

[borkacer]

Hi Community,

I am having trouble vertically centering flexible columns within a module group. Here is how it looks now in CMS hub :

This is the layout in the Design manager:

Each flexible column has a width: 15% assigned in the "inline styling". 

The columns are under a module group with a CSS class ".container-equal-columns":

There is also another module group "5 columns" with a CSS class ".columns-service-page":

Can anybody help me to distribute those columns evenly and center vertically? I would like the width of the whole group module to stay 95% of the page and width of each flexible column 15%.

Thank you

[Oezcan]

Hello @borkacer ,

did my suggestion help you? Were you able to center the modules? If not here is another solution:

.container-equal-columns .row-fluid {
width: 95%;
margin: 0 auto;
}

Please let me know if we can help you.

Best regards,

Özcan

[webdew]

Hi @borkacer ,

Please try this CSS:

if not shareme LIVE Url i will check and send you code

.container-equal-columns .row-fluid {
display: flex;
justify-content: center
}

.columns-service-page{
display: flex;
justify-content: center
}

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards.

[Oezcan · Accepted solution]

Hey  @borkacer , 

i tried another variant and i'm more satisfied with it:

.container-equal-columns {

width: 80% !important;

}

 

and your .row-fluid: 

 

.row-fluid {

display: flex;

justify-content: center;

}

please excuse my other solution beforehand if it did not help.

best regards

 

Özcan

[Oezcan]

Hey @borkacer ,

i tried with

.container-equal-columns {

margin: 0 auto;

}

.container-equal-columns .row-fluid {

display: flex;

justify-content: center

}

Maybe it will work that way for you too

best regards,

Özcan

[Teun]

Hi @borkacer ,

Can you share the page? Might be able to help out!

[Oezcan]

Hi @borkacer ,

did you try display: flex and justify-content:  center

or justify-content: space-between/around/evenly for container-equal-columns?

Maybe display: grid can also help.

Here are one guide for display flex and here for display grid!

Best regards,

Özcan

[borkacer]

Hey @Oezcan ,

I have tried all of that, in different combinations as well 😀 and with "margin: 0 auto !important" and still nothing. All the columns are still aligned to the left