1

I'm trying to make a div float to the center of it's container div, but the thing is that the user may decide to add from 1 up to 12 elements, so they must float in lines of 4. So, if the user adds only one element, this should float to the center of the container, if he/she adds two, they must float to the center of the container but next to each other. If the User adds 5 elements, the first four must float side by side (filling the width 100% of the container) and the fifth should be on the second line, at the center. This images show what I want to achieve:

Image 1: One element With one box

User input: only one box that floats to center.

Image 2: two elements with two boxes

The user selected two elements, so both of them float side of each other and to the center of the container div.

Image 3: four elements The first line is full

The user selected four elements, so the first side is full, the 100% of the container div is filled by four boxes of 25% with each.

Image 4: five elements Five boxes

If the user selects 5 elements, the fifth one shall float to the center of the container div, right below the first line of the other 4 boxes.

With 6 boxes: enter image description here

Seven boxes! enter image description here

So, at the end, I'll be adding some asp.net vb that will bring the desired boxes to a repeater control, according to some data stored in a SQL database, and bringing the desired controls through a stored procedure.

I've been trying different techniques, but none of them have solved my issue (margin: 0 auto; display: inline-block; etc...)

Any help will be highly appreciated!!

Thanks

epaezr
  • 454
  • 2
  • 6
  • 15

1 Answers1

1

Here's a flexbox solution:

HTML

<div class="container">
    <div class="box box1"><span>1</span></div>
    <div class="box box2"><span>2</span></div>
    <div class="box box3"><span>3</span></div>
    <div class="box box4"><span>4</span></div>
    <div class="box box5"><span>5</span></div>
    <div class="box box6"><span>6</span></div>
    <div class="box box7"><span>7</span></div>
    <div class="box box8"><span>8</span></div>
    <div class="box box9"><span>9</span></div>
    <div class="box box10"><span>10</span></div>
    <div class="box box11"><span>11</span></div>
    <div class="box box12"><span>12</span></div>
</div>

CSS

html { height: 100%; }

body {     
    height: 100%;
    background-color: yellow;    
    }

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    width: 400px;
    height: 100%;
    margin: auto;
}

.box {
    height: 50px;
    width: 75px;
    margin: 10px;
    background-color: lightgreen;
    border: 1px solid #aaa;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
}

DEMO

In the demo, try removing any number of divs. Remaining divs will always be centered.

Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, post your CSS in the left panel here: Autoprefixer.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701