我正在尝试将移动设备上的卡片居中对齐。 我尝试使用margin:0auto；，但没有工作。 下面的代码(使用display:flex；justify-content:center；align-items:center；)仍然没有将它们居中。 也许我有些矛盾的CSS。 我也试过使用Bootstrap。
我该如何用CSS或Bootstrap来解决这个问题（将卡居中）？
null
@media only screen and (max-width: 792px) {
.projects a {
width: 350px;
display: flex;
justify-content: center;
align-items: center;
margin-top: 300px;
}
.card_wrapper {
display: flex;
justify-content: center;
align-items: center;
}
}
.wrapper {
max-width: 850px;
margin: 20px auto;
height: auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
}
.card_wrapper {
width: 460px;
position: relative;
margin: 6rem 3rem;
display: flex;
flex-direction: column;
background: url("../../images/projects/ecommerce.png");
background-size: contain;
background-repeat: no-repeat;
} <section class="projects" id="portfolio">
<div class="project-title pb-5">
<h1 class="text-uppercase title-h1">Projects</h1>
</div>
<a href="#" class="link">
<article class="card_wrapper">
<div class="project_summary">
<h2 class="project_title">MERN Stack</h2>
<p class="project_desc text-secondary">
I integrated Braintree </p> </div>
</article>
</a>
<a href="#" class="link">
<article class="card_wrapper">
<div class="project_summary">
<h2 class="project_title"> Website</h2>
<p class="project_desc text-secondary">
entertainment website </p>
</div>
</article>
</a>
</section>null
请尝试以下操作:
null
@media only screen and (max-width: 792px) {
.projects{
display:flex;
flex-direction:column;
justify-content:center;
}
.project_summary, .project-title{
width:100%;
text-align:center;
}
html .projects a{
width:100%;
}
.projects a {
width: 350px;
display: flex;
justify-content: center;
align-items: center;
margin-top: 300px;
}
.card_wrapper {
display: flex;
justify-content: center;
align-items: center;
}
}
.wrapper {
max-width: 850px;
margin: 20px auto;
height: auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
}
.card_wrapper {
width: 460px;
position: relative;
margin: 6rem 3rem;
display: flex;
flex-direction: column;
background: url("../../images/projects/ecommerce.png");
background-size: contain;
background-repeat: no-repeat;
}<section class="projects" id="portfolio">
<div class="project-title pb-5">
<h1 class="text-uppercase title-h1">Projects</h1>
</div>
<a href="#" class="link">
<article class="card_wrapper">
<div class="project_summary">
<h2 class="project_title">MERN Stack</h2>
<p class="project_desc text-secondary">
I integrated Braintree </p> </div>
</article>
</a>
<a href="#" class="link">
<article class="card_wrapper">
<div class="project_summary">
<h2 class="project_title"> Website</h2>
<p class="project_desc text-secondary">
entertainment website </p>
</div>
</article>
</a>
</section>