Center columns dynamically

Question

Center columns dynamically

Navigation

#1 by (1 votes)

0

I'm doing a web in which I need to dynamically center some columns, each column is filled with values that I use from a backend, meaning that if there is only one element, it should appear in the center of the view, so if there are two elements must appear centered, the limit of columns to show are 4.

 <div class="chefs col-md-12 col-xs-12 col-sm-12" style="width: 100%;">
  <div class="row list_chefs">
   <div class="Tchef col" *ngFor="let item of datosChef">
    <div>
     <img src="{{item.photo}}" alt="" class="img_Tchef">
    </div>
     <p class="nombre_Tchef">{{item.surname}} {{item.last_name}}</p>
     <div class="row cont_bHats">
       <div *ngFor="let sombrero of item.rateArray" class="black_hats">
        <img class="img_black_h" src="{{sombrero.icon}}">
       </div>
      </div>
      <button class="btn-seleccionar" (click)="sendchef(item)">SELECCIONAR</button>
     </div>

    </div>

   </div>

How can I center that column so that when 1 to 3 elements come out it will appear in the center.

html css

asked by Gerardo Gutiérrez 03.09.2018 в 23:49

source

1 answer

Server does not receive full JS fix How to fill an Html.DropdownListFor ()?

score 1 · Answer 1

If you only want to show vertically centered elements you can use the following css in the parent:

.padre_contenedor{
  display: flex;
  align-content: center;
  justify-content: center;
}

Example:

*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  box-shadow: inset 0 0 0 1px;
}

.father_container{
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  padding: 1em;
  min-height: 10em;
}

.father_container p{
  padding: .5em;
}

<div class="father_container">

  <p> contenido </p>
  <p> contenido asdasd</p>
  <p> contenido </p>
  <p> contenidoasd aasdsad </p>
  <p> contenido </p>

</div>