Image not displaying in horizontal - php

Question

I want the image to automatically be in horizontal, Should I put another div? because the picture will be save automatically by their position
And here's my CSS:
.row{
display: block;
height:auto;
width:auto;
}
.box_img2{
width: 20px;
padding : 5px;
margin-bottom:5px;
background-color:white;
height:30px;
float:center;
}
And here's my PHP:
<?php
include('../connection/connect.php');
$result = $db->prepare("SELECT * FROM candposition ORDER BY posid ASC");
$result->bindParam(':userid', $res);
$result->execute();
for($i=0; $row = $result->fetch(); $i++){
$dsds=$row['posid'];
$resulta = $db->prepare("SELECT sum(votes) FROM candidates WHERE posid= :a");
$resulta->bindParam(':a', $dsds);
$resulta->execute();
for($i=0; $rowa = $resulta->fetch(); $i++){
$dsada=$rowa['sum(votes)'];
}
echo '<div style="margin-top: 18px;">';
echo '<strong>'.$row['pos_name'].' '.'</strong><br>';
$results = $db->prepare("SELECT * FROM candidates,student WHERE candidates.idno=student.idno AND posid= :a ORDER BY votes DESC");
$results->bindParam(':a', $dsds);
$results->execute();
for($i=0; $rows = $results->fetch(); $i++){
if($dsds=='Commissoner'){
echo $rows['prog_id'].$rows['prog_id'].' '.$rows['prog_name'].' = '.$rows['votes'];
}else {
echo "<div class='row'><div class='box_img2'><br>";
echo '<img src="savephp/images/'.$rows['image'].'" width="60" height="70px" />'.' '.$rows['lastname'].', '.$rows['firstname'].'<br>'.' = '.$rows['votes'];
echo '</div>';
}
echo '</div>'.'</div>';
$sdsd=$dsada
?>
<br><br><br><br><br>
<img src="../img/percent.gif"width='<?php echo(100*round($rows['votes']/($sdsd),2)); ?>'height='10'>
<?php
if ($rows['votes']==0){
echo "<br>";}
else {
echo(100*round($rows['votes']/($sdsd),2)); ?>%<br>
<?php
}
echo '</div>';
}
?>
<?php
}
?>
Here's the image:
I want to be like this

Answer 1

Try this:
.box_img2{
width: 20px;
padding : 5px;
background-color:white;
height:30px;
position: fixed; /* or absolute */
top: 50%;
left: 50%;
margin-top: -15px;
margin-left: -10px;
}

Answer 2

Try going down this path, and looking at things like Boostrap's methods to do thumbnail grids, etc., may help you a lot.
Note, the img CSS is more of an either/or thing...one centers, the other will make it fill the 33% of its container.
<style type='text/css'>
.row:before, .row:after { clear:both; }
.img-container {
float:left;
width:33%;
text-align:center;
}
.img-container img { /* if you want it centered */
display:block; margin:0 auto;
}
</style>
<div class='row'>
<?php for($i=0; $rows = $results->fetch(); $i++) { ?>
<div class='img-container'>
<img src="savephp/images/<?php echo $rows['image'] ?>" width="60" height="70px" />
<?php echo $rows['lastname'] ?>, <?php echo $rows['firstname'] ?><br />
=<?php echo $rows['votes'] ?>
</div>
<?php } ?>
</div>
UPDATE I've updated the code above to give a general idea of putting the images into the page. You can build out the rest of the HTML and conditions as needed. The important thing to note is that if you want 3 images across horizontally, make the width of the .img-container 33%. If you only want 2 horizontally, make the width of the .img-container 50%. They will automatically wrap to the next row. Your code was creating a new <div class="row"> for every single entry, which would put each new entry onto its own line rather than having them layout horizontally.
If you hit points where you want a 100% row, you can just give that a different class with width:100% and it will put itself on its own row.
Again, if you lookup how grids work with Bootstrap 3, it will help you get almost any alignment that you want, and I highly recommend using something like that to get going, and then once you're good at creating layouts...then figure out "how" they do it.