как отцентрировать заголовок на экране с несколькими столбцами, с равным пространством с обеих сторон, используя css angular 2+

Question

Я пытался центрировать div small_wrapper1 на моем экране так, чтобы у меня было пустое пространство с обеих сторон, а панель навигации отображалась прямо в центре. Как мне создать панель навигации таким образом, чтобы она отображала одинаковое количество пробелов на разных настройках дисплея. Или, например, покажите 100px marign с обеих сторон в разрешении 641px и покажите 50px margin с обеих сторон при разрешении 320px, пока показывает панель навигации в хорошем формате, заполняя центр.

Я играю с процентами и меняю ширину, но я изо всех сил пытаюсь найти адаптивный способ, чтобы он работал на большинстве форматов экрана. Должен работать на большинстве платформ.

 .small_wrapper1{
    z-index: 1000;
    font-size: 16px;
    position: -webkit-sticky;
    position: sticky;
    top: 85px;
    width: 90%;
    color:rgb(215,193,179);
    box-shadow: 0 7px 12px rgb(3, 3, 3);
    background-color: rgb(225, 233, 255);
    margin-left: 100px;
    display: grid;
    grid-template-columns: 25px 25px (repeat, 100px) 50px;  
    grid-auto-rows: 30px;
    grid-gap: 5px;
    grid-template-areas:
    "h1 h2 h3 h4 h5 h6 h7 h8"
  }

   <div class="wrapper">
       <div class="small_wrapper1">
        <div class="header1">Rank</div>
        <div class="header2">Grade</div>
        <div class="header3">Name</div>
        <div class="header4">Price</div>
        <div class="header5">Market Cap</div>
        <div class="header6">change(24hr)</div>
        <div class="header61">(24hr)</div>
        <div class="header7">change(7d)</div>
        <div class="header71">(7d)</div>
        <div class="header8"></div>
       </div>
       <ol style="color:rgb(0, 27, 87)">
        <div class="arrayOfGrade" *ngFor="let key of arrayOfGradedCoins; let i = index">
        <div class="small_wrapper">
        <div class="column1">test</div>
        <div class="column2">test2 </div>
        <div class="column3">test3</div>
        <div class="column4">test4</div>
        <div class="column5">test5</div>
        <div class="column6"</div>
        <div class="column7"</div>
       </div>
      </div>
    </ol>
   </div>

Answer 1

Ваш код не был полностью понятен, пожалуйста, прочитайте фрагмент. Я надеюсь, что это поможет вам.

.small_wrapper1{
  z-index: 1000;
  font-size: 16px;
  position: -webkit-sticky;
  position: sticky;
  top: 85px; /*this wil not work unless you use position: absolute;*/
  /*width: 90%;*/
  color:rgb(215,193,179);
  box-shadow: 0 7px 12px rgb(3, 3, 3);
  background-color: rgb(225, 233, 255);
  margin:0 100px; /* this margin is used when no media querys are active */
  display: grid;
  grid-template-columns: 25px 25px (repeat, 100px) 50px;  
  grid-auto-rows: 30px;
  grid-gap: 5px;
  grid-template-areas:
  "h1 h2 h3 h4 h5 h6 h7 h8"

  margin:0 auto; /*this wil exactly center the div inside its parent*/

}

/*Use media querys to apply changes to the css if the screen becomes a certain size*/
@media only screen and (max-width: 600px) {
  .small_wrapper1 {
    margin: 0 50px; /*this margin in set when the screen has a maximum size of 600px*/
  }
}

<div class="wrapper">
    <tr>
     <div class="small_wrapper1">
      <th class="header1">Rank</th>
      <th class="header2">Grade</th>
      <th class="header3">Name</th>
      <th class="header4">Price</th>
      <th class="header5">Market Cap</th>
      <th class="header6">change(24hr)</th>
      <th class="header7">change(7d)</th>
      <th class="header8"><input class="textSearch" type="text" style="background-color: rgb(215,193,179); border: none; padding: 0; color: black " placeholder="search" [(ngModel)]="filterString" (keyup)="applyfilter()"> 
      </th>
  </div>

Answer 2

используйте margin: 0 auto; это займет ширину устройства и автоматически центрируется.