Menu icon Foundation
"Centered" column no longer working in 5.0.3??

I recently upgraded my version of Foundation from 5.0.2 to 5.0.3 and noticed that the "centered" class for a column doesn't seem to be working for me anymore. You can check out an example of the code I used on my site here: http://jsfiddle.net/Zd32J/. When the browser is sized to "medium", the right column (with the images in it) should be 8 columns wide and centered (but right now its sticking to the right side).

And here is my code:

<div class="row">
    <div class="large-5 columns">
		<p class="text-center">Lorem ipsum dolor</p>
	</div>
	<div class="medium-8 medium-centered large-7 large-uncentered columns">
		<ul class="small-block-grid-3 large-block-grid-6">
			<li><img src="http://placehold.it/120x75"></li>
			<li><img src="http://placehold.it/120x75"></li>
			<li><img src="http://placehold.it/120x75"></li>
			<li><img src="http://placehold.it/120x75"></li>
			<li><img src="http://placehold.it/120x75"></li>
			<li><img src="http://placehold.it/120x75"></li>      
		</ul>
	</div>
</div>
            

         

Anyone else experiencing issues with "centered"?

gridcolumnsalignment

I recently upgraded my version of Foundation from 5.0.2 to 5.0.3 and noticed that the "centered" class for a column doesn't seem to be working for me anymore. You can check out an example of the code I used on my site here: http://jsfiddle.net/Zd32J/. When the browser is sized to "medium", the right column (with the images in it) should be 8 columns wide and centered (but right now its sticking to the right side).

And here is my code:

<div class="row">
    <div class="large-5 columns">
		<p class="text-center">Lorem ipsum dolor</p>
	</div>
	<div class="medium-8 medium-centered large-7 large-uncentered columns">
		<ul class="small-block-grid-3 large-block-grid-6">
			<li><img src="http://placehold.it/120x75"></li>
			<li><img src="http://placehold.it/120x75"></li>
			<li><img src="http://placehold.it/120x75"></li>
			<li><img src="http://placehold.it/120x75"></li>
			<li><img src="http://placehold.it/120x75"></li>
			<li><img src="http://placehold.it/120x75"></li>      
		</ul>
	</div>
</div>
            

         

Anyone else experiencing issues with "centered"?

Rafi Benkual over 5 years ago

I made a codepen with your code, click edit pen to see code.
http://cdpn.io/zoGem

I added <div class="medium-4 columns"> back in and it works.

You want each row's columns to add up to 12 (default) for each specified size.

Adam D over 5 years ago

Thanks Rafi. I'm assuming I have to do this because my one row eventually turns into two rows..?? Weird that this wasn't an issue before I upgraded. Also, the documentation on using the Grid doesn't mention anything about having to have columns adding up to 12 when using the "centered" feature. Odd...

http://foundation.zurb.com/docs/components/grid.html