Looping to make outputs centered - php

Question

I want to display all my categories in one page, 4 items per row.
If I have 4,8 or 12 items then I have no problem, however if I have 5 items or any "number of items" that is not divisible by 4 without any remainder appears on the next row (as I have set each item 25% of the screen with css) with subsequent gap space which looks really odd and empty. This is a problem and I call those remainder items indeBox as in independent boxes.
My end goal is to align those independent boxes on the centre.
I am trying to create an algorithm for this purpose.
Here is what I have done so far
The following function takes two parameters.
numberRestriction is the number of items allowed per row (4)
childrens is an object with all categories.
I am counting how many categories are present within the childrens object
and finding out if there are remainders.
function calculateDivision($numberRestriction, $childrens)
{
$arrayobj = new ArrayObject($childrens);
$itemLenght = $arrayobj->count();
$itemBasket = $itemLenght;
$remaining = $itemBasket % $numberRestriction;
return $remaining;
}
On the template
<?php
//$term = get_queried_object();
$childrens = get_categories(array('parent' => 27,'hide_empty' => false));
$rowRestriction =4;
$indeBox = calculateDivision($rowRestriction, $childrens);
$arrayobj = new ArrayObject($childrens);
$itemLenght = $arrayobj->count();
$i = 0;
if($indeBox == 0)
{
foreach($childrens as $index => $children)
{
$cat_image = z_taxonomy_image_url($children->term_id);
$cat_id = $children->term_id;
$desc = #explode('|', $term->description);
?>
<a href="<?php echo get_category_link($cat_id) ?>" >
<div class="food_list_single menus_list" style="background: url(<?php echo $cat_image ?>) no-repeat scroll right center / cover ">
<div class="food_hover menus_hover ">
<p style="width: 100%; overflow: hidden; padding: 10px; text-align: center;" class="food_hover_title_small"><?php echo $desc[2] ?></p>
<p class="food_hover_title"><?php echo $children->name ?></p>
<button class="btn btn-default food_button"><i class="fa fa-eye"></i>View Details</button>
</div>
</div>
</a>
<?php
} //foreach ends
}else
{
//loop all items
//set a counter
//everytime the counter reaches maximum item allowed in a row, counter should reset and add class to row even
//once it finds odd number in a row it should call the row uneven
$counter1 = 0;
foreach($childrens as $index => $children)
{
$counter1++;
$cat_image = z_taxonomy_image_url($children->term_id);
$cat_id = $children->term_id;
$desc = #explode('|', $term->description);
//out put div
?>
<a href="<?php echo get_category_link($cat_id) ?>" >
<div class="food_list_single menus_list" style="background: url(<?php echo $cat_image ?>) no-repeat scroll right center / cover ">
<div class="food_hover menus_hover ">
<p style="width: 100%; overflow: hidden; padding: 10px; text-align: center;" class="food_hover_title_small"><?php echo $desc[2] ?></p>
<p class="food_hover_title"><?php echo $children->name ?></p>
<button class="btn btn-default food_button"><i class="fa fa-eye"></i>View Details</button>
</div>
</div>
</a>
<?php
//also track the last items index
$last_items_index = $index;
?>
<?php
}
echo "Inde items :".$indeBox; //finds how many indeboxes
echo " Last items index " . $last_items_index ;
}
?>
Image

Answer 1

Solution: Not beautiful or efficient, but it works
Find out how many items in the array attach to a variable.
Find out how many boxes fit in a row and attach to a variable.
Calculate independent boxes using following function:
.
function calculateDivision($numberRestriction, $childrens)
{
$arrayobj = new ArrayObject($childrens);
$itemLenght = $arrayobj->count();
$itemBasket = $itemLenght;
$remaining = $itemBasket % $numberRestriction;
return $remaining;
}
Since I already know 4 boxes fit in a row, so there can only be either 1,2 or 3 independent boxes. and if there are 4 boxes then there are no independent boxes. I can run conditions
if($indeBox == 1)
{
//if there are one independent box remaining
//find the last item of the array and put a bootstrap class col-md-offset-3 to
//if not last item, no need for adding additional class
}
else if($indeBox == 2)
{
//if there are two independent boxes remaining
//find the second last item of the array and put a bootstrap class col-md-offset-3 to
//if not last item, no need for adding additional class
}
else if($indeBox == 3)
{
//if there are three independent box remaining
//find the third last item of the array and put a bootstrap class col-md-offset-3 to
//if not last item, no need for adding additional class
}