Question

I would like to create a seating plan by using css. As a box, I used this tutorial’s css file http://net.tutsplus.com/tutorials/html-css-techniques/create-a-document-icon-with-css3/.

Firstly, when I’m trying to add second box in a same row, it will skip a line,
then I changed box’s css with the following:

.docIcon {
   background: #15cd2f;

   background: -webkit-linear-gradient(top, #caffb2 0, #15cd2f 15%, #caffb2 40%, #caffb2 70%, #15cd2f 100%);
   background: -moz-linear-gradient(top, #caffb2 0, #15cd2f 15%, #caffb2 40%, #caffb2 70%, #15cd2f 100%);
   background: -o-linear-gradient(top, #caffb2 0, #15cd2f 15%, #caffb2 40%, #caffb2 70%, #15cd2f 100%);
   background: -ms-linear-gradient(top, #caffb2 0, #15cd2f 15%, #caffb2 40%, #caffb2 70%, #15cd2f 100%);
   background: linear-gradient(top, #caffb2 0, #15cd2f 15%, #caffb2 40%, #caffb2 70%, #15cd2f 100%);

   border: 1px solid #ccc;
   display: block;
   width: 26px;
   height: 50px;

   float:left;
   text-align:center;
}

but then the problem is, I need row’s to be centered instead of standing on left.

How should I do that ?

Thanks.

Answer 1

.docIcon {display: inline-block;}

Then wrap your boxes in a container that is centered and has text-align: center