CODEWITHSUNDEEP
htmlcsszurb-foundationflexbox
RandomBits
RandomBits

Reputation: 4294

Centering content in Foundation 6 Flex Grid

I am using the Flex Grid component of Zurb Foundation 6 to create a grid of responsive squares -- and that works beautifully. For the life of me, however, I cannot get the square content centered. I have tried all the usual css tricks: relative/absolute, a nested flex grid, etc. There must be something I am missing -- thanks for your help.

Here is the jsfiddle (which is the base code without any attempt at centering).

<div class="row">
  <div class="square small-6 columns">
    ABC
  </div>
  <div class="square small-6 columns">
    DEF
  </div>
</div>
<div class="row">
  <div class="square small-6 columns">
    123
  </div>
  <div class="square small-6 columns">
    456
  </div>
</div>

.square {
  border: solid blue 1px;
  padding-bottom: 30%;
}

Upvotes: 2

Views: 3492

Answers (3)

Todoroki
Todoroki

Reputation: 454

You can do this with Foundation 6 (with Flex-Grid) only too.
The trick is to attach both align-spaced and align-middle to the outer row.

<div class="row align-spaced align-middle">
  <div class="square small-6 row align-center">
    <div class="row align-middle">
      <span>ABC</span>
    </div>
  </div>
  <div class="square small-6 row align-center">
    <div class="row align-middle">
      <span>DEF</span>
    </div>
  </div>
</div>
<div class="row align-spaced align-middle">
  <div class="square small-6 row align-center">
    <div class="row align-middle">
      <span>123</span>
    </div>
  </div>
  <div class="square small-6 row align-center">
    <div class="row align-middle">
      <span>456</span>
    </div>
  </div>
</div>

<style>
    .square {
      border: solid blue 1px;
      height: 30vh;
    }

</style>

as @michael-b points, the height is important.
Also, you can cut off one div layer if you do not need the blue line.

<div class="row align-spaced align-middle" style="height: 100px;">
  <div class="small-6 row align-center">
    <span>...</span>
  </div>
</div>

Upvotes: 1

Michael Benjamin
Michael Benjamin

Reputation: 372274

For the life of me, however, I cannot get the square content centered. I have tried all the usual css tricks: relative/absolute, a nested flex grid, etc.

Well, the nested flex grid actually works:

.square {
    border: solid blue 1px;
    padding-bottom: 30%;

    display: flex;                /* new */
    justify-content: center;      /* new */
    align-items: center;          /* new */
}

It centers the content both vertically and horizontally.

The problem is that the boxes don't have any height. There's no space for the content to move vertically. What looks like height is actually padding, and that's outside the content box.

This is what the layout looks like without the padding-bottom: 30%: DEMO 1

Then add the nested flex container: DEMO 2

Then give the box some height: DEMO 3

Per the CSS Box Model, text goes in the content box. The padding is generally a content-free zone.

Upvotes: 2

damiano celent
damiano celent

Reputation: 709

Here you go

li {
width:50%;
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
}

That is it, does the trick. Responsive etc.

Link

http://codepen.io/damianocel/pen/WrMmGe

Upvotes: 1

Related Questions