Reputation: 4294
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
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
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
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