我正在尝试在我的 .html 中实现卡引导,但我无法使其居中。请参阅下面的代码并帮助
<h1> 10 Games Recommended Based on {{ selected }} </h1>
<div class = "container">
<div class="recommendations">
{% for name in names_list %}
<div class="card-group">
<div class="card text-center" style="Max-width: 30%;">
<!-- <img src="..." class="card-img-top" alt="..."> -->
<div class="card-body">
<h5 class="card-title"> <a href = "{{ games[name]['url'] }}" target = "popup">{{ name }}</a></h5>
<div class = 'card-body'>
<p1 class = "card-text">Overall Reviews: {{games[name]['rating'] }}</p1>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
我为混乱道歉,但我的应用程序给出结果的方式像这样被推到左边。
我的风格如下
<style>
p {font-size: 30px;}
p1 {font-size: 13px;}
a {color:navy;
font-size: 20px;}
body {text-align: center;}
body {background-color: lightblue;}
</style>
无论如何我可以在使用循环时将它们居中或并排对齐吗?