centering HTML output

Question

How can I center the output of this? I want is to the products in the boxes are in the center of the main body

#nicebox {
 float: left;
 /*position: relative;*/
 border: 1px solid #fff;
 padding: 5px;
 margin: 10px;
 
}

<h3>Popular Products</h3>

<?php
require_once('my_connect.php');

$my_query="select * from products limit 5"; 
$result= mysqli_query($connection, $my_query);

while ($myrow = mysqli_fetch_array($result)):

$description = $myrow["product_description"];
$price = $myrow["price"];
$image=$myrow["image"];

if($image):
echo "<div id=\"nicebox\"><a href=\"products/$image\" rel=\"lightbox[dp]\"  title=\"$description\" alt=\"Hello\"><img src=\"products/$image\" class=\"thumbnail\"></a></div>";

endif;

endwhile;

?>

thanks in advance!

php has nothing to do with centering. it is strictly html + css. you made `float: left;` - there is no centering. moreover, `display:block` (which is div by default) will take all possible width — Cheery, Nov 23 '14 at 20:40
This has nothing to do with PHP; all the browser sees is the HTML and CSS, so if you know what the HTML needs to look like, outputting that with PHP is easy. — IMSoP, Nov 23 '14 at 20:40
possible duplicate of [Horizontally center a div in a div](http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div) — Garcia Hurtado, Nov 23 '14 at 22:22

score 0 · Answer 1 · answered Nov 23 '14 at 20:43

0

#nicebox {
    /*position: relative;*/
    border: 1px solid #fff;
    padding: 5px;
    margin: 0 auto;

}

I think this should do the trick.

answered Nov 23 '14 at 20:43

wayzz

585
6
23

thanks! I have multiple images on one line so doing that just stretches the entire box across however. – jo0rdan Nov 23 '14 at 21:01

score 0 · Answer 2 · answered Nov 23 '14 at 20:45

0

Wrap the PHP output in a <div> give it an id (e.g. #output) or class and add style to it.

#output {
  margin: 0 auto;
}

answered Nov 23 '14 at 20:45

markphd

1,394
1
12
17

centering HTML output

2 Answers2