Question

I am trying to create something like this:

But I have problems beacuse it has to be made inside a foreach loop.

This is how I have it right now but it aint like the image I dont know how to do it like my image.

 @{
       int counter = 1;

          @foreach (IconsViewModel items in Model.AllIconsModel)
          {

              <a href="#" class="box"></a>
              <p>@(counter++)</p>

          }               
  }

CSS:

.box

{
    border: 1px solid black;
    width: 65px;
    height: 65px;
    float: left;     
}

I will be very thankful if somone would help me.

Answer 1

You have to define html like this:

HTML

<div class="wrapper">
    <div class="parent">
      <a href="" ></a>
      <p></p>
    </div>
    <div class="parent">
      <a href="" ></a>
      <p></p>
    </div>
</div>

CSS

.wrapper{
  text-align:center;
}

.parent{
  display:inline-block;
  *display:inline;/*For IE*/
  *zoom:1;
  text-align:center;
}
.box
{
    border: 1px solid black;
    width: 65px;
    height: 65px;
    display: block;     
}

JS

 @{
       int counter = 1;

          @foreach (IconsViewModel items in Model.AllIconsModel)
          {
              <div class="parent" >
                <a href="#" class="box"></a>
                <p>@(counter++)</p>
              </div>
          }               
  }