Center box when i have only one CSS

Asked Jun 17 '19 at 22:38

Active Jun 17 '19 at 22:38

Viewed 20 times

Im working on a css based only on divs , getting the info from a while php cicle I have the following case, in a grid im showing the boxes like this:

X X X
 X X X
 X (in case if there is 7)

But, i need to center the 7th row in the following way:

 X X X
 X X X
   X

Please note the 7th box is in the middle, and if there is only 2, should be:

X X X
 X X X
  X X

I cant get this to work, this is my css:

.block .the-content {
    float: left;
    width: 33.33%;
    margin-top: 62px;
}

Not sure if there is some special class for this.

asked Jun 17 '19 at 22:38

lucasvm1980

1

replace float with inline-block then simply add `text-align:center` – Temani Afif Jun 17 '19 at 22:42
good trick, this one also works, display: inline-grid; its ok to use this? its working better on my theme, the other is adding some lines... – lucasvm1980 Jun 17 '19 at 22:55
all the `inline-*` will do the same job, the only difference in the inside of the elemen that will be either a block or grid element – Temani Afif Jun 17 '19 at 22:59
thank you!, not sure how to mark as correct on a comment. – lucasvm1980 Jun 17 '19 at 23:03
no need, I already closed as duplicate where you will find the answer there – Temani Afif Jun 17 '19 at 23:06
thank you, anyway i have solved the issue. – lucasvm1980 Jun 17 '19 at 23:09

0 Answers0