Menu icon Foundation
Basic, centered DIV using XY?

I don't understand what I'm missing. I went through the XY doc but I can't for the life of me get a simple div to be centered--it's always offset on one side or another. I ditched the offset method because it wasn't working, but the auto cell doesn't work either.

 

<div class="grid-container">

        

            <div class="grid-x">

            	<div class="large-auto cell"></div>

            	<div class="cell large-8 medium-8 small-12">

            	<h1>title</h1>

            	<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris.</p>

                </div>

            	<div class="large-auto cell"></div>

            </div>

        

        </div>

 

 

 

centeredcenterxy

I don't understand what I'm missing. I went through the XY doc but I can't for the life of me get a simple div to be centered--it's always offset on one side or another. I ditched the offset method because it wasn't working, but the auto cell doesn't work either.

 

<div class="grid-container">

        

            <div class="grid-x">

            	<div class="large-auto cell"></div>

            	<div class="cell large-8 medium-8 small-12">

            	<h1>title</h1>

            	<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris.</p>

                </div>

            	<div class="large-auto cell"></div>

            </div>

        

        </div>

 

 

 

Will Moody 3 months ago

Hi Designer

 

This works, Iv'e added align-center to the grid-x and changed large-auto to small-12.

<div class="grid-container">
  <div class="grid-x align-center">
    <div class="small-12 cell"></div>
    <div class="cell large-8 medium-8 small-12">
      <h1>title</h1>
      <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris.</p>
    </div>
    </div>
    <div class="large-auto cell">
      <h2>title</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias obcaecati autem est, totam expedita reprehenderit nam consectetur quo aut ipsam dolorum illum cupiditate quia doloribus ad ab pariatur, ex excepturi.</p>
    </div>
  </div>

 

Will

Rafi Benkual 3 months ago

Will has got the right answer!

Designer 3 months ago

Look at all that code just to make one centered div.

 

Hmm.

Rafi Benkual 3 months ago
jSwtch 3 months ago

Hi Rafi! -> Quick Question!

 

Why does this img not center over the text?

I'm using the same codepen but cant get it to work...

 

<header class="grid-x align-center align-middle">

  <div class="cell shrink">

          <a href="contact.html"><img src="http://via.placeholder.com/50x50" alt="" style="border-radius:25px;"></a>

          <h3>Contact</h3>

  </div>

</header>

 

Designer 3 months ago

I unfollowed this thread but am still getting email notifications...

kevin neal 2 months ago

What about if you are building semantically, on the float grids I used to use  @include grid-column-position(center);

is there an equivalent in xy-grids?

Jan Willem Hoogstraten 6 days ago

@kevin

If you want to build it semantically put:

@include flex-align(center);

 

on your xy-grid-container(). The xy-grid is based on flexbox layout, so use flexbox utilities: the mixin @include flex-align(center) will do the trick! This generates the following:

-webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;

 

And all your columns... ahum xy-cells...will neatly center!