невозможно центрировать дочерний элемент в сетке CSS - PullRequest
Новая
       15

невозможно центрировать дочерний элемент в сетке CSS

0 голосов
/ 03 июля 2018

Структура css моего приложения

приложение верхнего уровня имеет сетку CSS с 3 рядами -nav компонент занимает 1-ю строку -content-component занимает 2-й ряд нижний колонтитул занимает 3-й ряд 

.css-grid-container{
  height:100vh; /*height of the container is same ahs height of the view port.*/
  display: grid;
  grid-gap:20px;
  grid-template-columns: 1fr;  /* 1 columns*/
  grid-template-rows: auto 15fr 1fr; /* 3 rows. Auto takes height of navigation, remaining is divided into 2 rows, middle row is 15 times larger than the 3rd row.*/
}

app-nav-component {
  grid-column: 1 / -1;
  grid-row: 1 / 2;
}

app-content-component{
  grid-column: 1 / -1;
  grid-row: 2 / 3;
}

app-footer-component{
  grid-column: 1 / -1;
  grid-row: 3 / -1;
}

HTML-код 

<div class="body__div--background"  >
    <app-nav-component></app-nav-component>
    <app-content-component></app-content-component>
    <app-footer-component></app-footer-component>
  </div>

Компонент контента в середине - это место, где я хочу расположить свои новые компоненты. ContentComponent s html код 

<div id="content-div">
  <router-outlet></router-outlet>
</div>

CSS 

#content-div{
  height:100%;
  display:grid; 
  grid-template-columns: 1fr;  /* 1 columns*/
  grid-template-rows: 1fr; /*1 row*/
}

Предполагается, что вышеуказанный компонент действует как контейнер для других компонентов (навигация и нижний колонтитул всегда остаются неизменными). Теперь у меня есть другой компонент, HomeComponent. Я хочу, чтобы HomeComponent был размещен внутри ContentComponent в центре. html и css, которые я написал для этого, - 

   <div class="homepage-component-css-grid-container" id="home-page-component">
  <app-practice-component></app-practice-component>
  <app-create-component></app-create-component>
</div>

CSS 

.homepage-component-css-grid-container{
  display: grid;
  grid-gap:20px;
  grid-template-columns: 1fr 1fr;  /* 2 columns*/
}

#home-page-component{
  align-self:center; /*center of the content component*/
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}


app-practice-component{
  grid-column: 1 / 2;
  align-self: center;
  justify-self:end;

}

app-create-component{
  grid-column: 2 / 3;
  align-self: center;
  justify-self:start;

}

Моя проблема в том, что HomeComponent не отображается в центре. Смотрите картинку ниже. Интересно отметить, что если через инструмент отладки браузера я вручную добавлю align-self:center в reboot.scss, то HomeComponent переместится в центр. Но reboot.scss это не мой файл. Как я могу выровнять HomeComponent по center

Рис 1 - поведение, которое я наблюдаю. HomeComponent не в центре

enter image description here

Pic2 - Если я добавлю align-self:center в reboot.scss

enter image description here

1 Ответ

0 голосов
/ 03 июля 2018

Я решил проблему, добавив еще 1 строку в #content-div

Проблема (которая также видна на фотографиях) - <router-outlet>. Html ContentComponent имеет <router-outlet>, где Angular разместит другие компоненты (например, HomePageComponent). Angular делает это путем сохранения тега <router-outlet> и добавления тега, специфичного для компонента, в html. Таким образом, в сетке должно быть место как для тега компонента

Новый код 

#content-div{
  height:100%;
  display:grid; 
  grid-template-columns: 1fr;  
  grid-template-rows: auto 99%; 
}

Я также добавил height:100% правило в homepage-component-css-grid-container, так как в противном случае высота сетки была равна высоте дочерних элементов 

.homepage-component-css-grid-container{
  display: grid;
  grid-gap:20px;
  grid-template-columns: 1fr 1fr;  /* 2 columns*/
  height:100%;
}

Мне больше не нужно home-page-component, поскольку правила align-self и justify-self в app-practice-component и app-create-component выполнили правильное выравнивание

...