Menu icon Foundation
Foundation medium-centered at XY Grid

Some body can help me?

No one of flexbox align works with XY Grid (foundation 6.4.1) (im using foundation essential)

Thanks

 

            <div class="grid-container">
                <div class="grid-x grid-padding-x align-center" style="background:red"> <!-- Aligned to the center -->
                    <div class="cell small-11" style="background:blue">Aligned to center</div>
                </div>
            </div>

xy gridcentered

Some body can help me?

No one of flexbox align works with XY Grid (foundation 6.4.1) (im using foundation essential)

Thanks

 

            <div class="grid-container">
                <div class="grid-x grid-padding-x align-center" style="background:red"> <!-- Aligned to the center -->
                    <div class="cell small-11" style="background:blue">Aligned to center</div>
                </div>
            </div>
Martavis Parker over 2 years ago

Have you tried adding 

justify-content: center;

to the grid-x class?

Designer over 2 years ago

...already we're modifying core declarations just to center something? I'm finding the same problem with centering a large div...seems not to know what the "center" is.

Roy Six over 2 years ago

Currently, the Foundation 6.4.1 Essential and Complete downloads don't have the align-center class defined in their CSS files. The Custom download and the CDN hosted version do have the align classes defined correctly in their CSS files. The fix that Martavis suggested is a great workaround for now, or you can just download the Custom or CDN versions.

Brock about 2 years ago

Or you can just add the class yourself to your global stylesheet.

.align-center {

    -webkit-box-pack: center;

    -webkit-justify-content: center;

    -ms-flex-pack: center;

    justify-content: center;

}

Dylan Gadwa over 1 year ago

I've been working and learning Foundation 6 on a number of projects that were set up over a year ago and been banging my head trying to understand what I am doing wrong.  It seems that this thread may hold the answer but I'm having some trouble understanding the point that @Roy Six brought up:

1) Why would "align-center" work in certain versions of the framework and not others?  Was it just an error or is there some reasoning behind it?

2) If this was just an error in Foundation's CSS, has it been fixed or do I need to account for this issue with current versions the Custom Download and CSS versions that are available today?

If it's simply a matter of accounting for something that needed correction in F6 when these projects were first set up, that's fine.  I've achieved the desired result using CSS (justify-content: center). If it's a gap in my knowledge with respect to the actual framework, that's fine too - I just need to know which of the two it is.

FWIW, "align-middle" works properly when applied to my structural markup and applied to a grid-x. This has been REALLY confusing for me as I wonder "Why would one work and not the other?"

Roy Six over 1 year ago

Hi Dylan, apologies for any confusion!

Yes, this was just a simple mistake on their part for the 6.4.1 release when it came out, the developers just forgot to include the align-center CSS for those two specific builds (Essential and Complete). It was fixed in the next version of Foundation (6.4.2), so all current versions now should be consistent with this (or at least I think so!).

If you were using 6.4.1 in your projects, that may be why you had to adjust the align. It's great that you were able to fix it yourself.