Элемент CSS Center в элементе Angular Router
Я уже много пробовал и искал много страниц, но я не могу выровнять его по центру:
router-outlet ~ * {
position: absolute;
height: 100%;
width: 90%;
display: block;
margin: auto;
}
.main{
margin: 20px;
}
Структура такая:
<mat-sidenav-content>
<div class = "main">
<router-outlet></router-outlet>
</div>
Что именно ты пытаешься сделать? Вы пытаетесь выровнять «это», но что это «это»? Выровнять как и где?
Router-outlet не является настраиваемым элементом шаблона, вы можете добиться этого, используя другой слой после router-outlet. Но вы можете просто настроить свой основной класс. Я также рекомендую вам изучить эту тему SO, stackoverflow.com/a/34645811/5955138
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Используйте CSS Flex Box для выравнивания элементов по центру.
Вы не можете центрировать router-outlet, используя имя тега router-outlet в css, потому что router-outlet не является настраиваемым элементом шаблона. Вместо использования имени тега router-outlet попробуйте обернуть его div и применить стили flex box к классу div.
В приведенном ниже примере div-оболочка имеет класс с именем .main.
justify-content: center используется для выравнивания элементов по центру.
.main {
display: flex;
align-items: center;
justify-content-center;
width: 90%;
}
<mat-sidenav-content>
<div class = "main">
<router-outlet></router-outlet>
</div>
Большое спасибо @Bear Nithi. Как вы узнали, что мы должны использовать выравнивание содержимого и выравнивание по ширине? Можно немного поподробнее! Спасибо еще раз :)
Подумайте об использовании атрибутов Bootstrap Flex, они сделают вашу жизнь намного проще и позволят веб-сайтам очень быстро реагировать на разрешение и разные размеры экрана.
Полезная ссылка - Bootstrap Flex
Пример того, как что-то центрировать -
<div class = "d-flex w-100>
<div class = "d-flex align-items-centre justify-content-between">
Hello World!
</div>
</div>Ваш вопрос описан немного расплывчато, я все равно постараюсь на него ответить. Пожалуйста, прокомментируйте, если я вас неправильно понял.
Насколько я понял, вы пытаетесь выровнять по горизонтали родственный контейнер router-outlet-тега.
Почему это не работает?
Розетка маршрутизатора не имеет определенного свойства display. Следовательно, его ширина и высота равны 0px, и вы не можете центрировать другой контейнер в соответствии с элементом ширины 0px.
Решение
router-outlet {
display: block;
}
Это позволяет сделать следующее:
<div> <!-- some outer element -->
<router-outlet>
<div #center-me>CENTER ME</div>
</div>
router-outlet ~ #center-me {
margin: auto; /* example if center-me is a block-level element */
}
Это возможно, даже я бы не рекомендовал вам это делать. Стилизация в соответствии с элементом-оболочкой, возможно, была бы лучшим подходом.
почему вы использовали этот селектор?
router-outlet ~ *?