css - 水平对齐这些 CSS div

Question

我正在尝试将以下代码的 UL 列表居中，以使卡片容器元素居中。但是，在检查了教程和堆栈溢出之后，我似乎无法找到阻止我实现此目标的问题。

HTML代码

<ul class="card-container">
<li><div class="card">
    <div class="card-image">
        <img src="img/Question.png">
    </div>
    <div class="card-theme">
        <a href="#">Should you be here?</a>
    </div>
</div>
</li>
<li><div class="card">
    <div class="card-image">
        <img src="img/Question.png">
    </div>
    <div class="card-theme">
        <a href="#">Should you be here?</a>
    </div>
</div>
</li>
<li>
<div class="card">
    <div class="card-image">
        <img src="img/Question.png">
    </div>
    <div class="card-theme">
        <a href="#">Should you be here?</a>
    </div>
</div>
</li>
</ul>

对应的CSS代码

.card-container{
background-color:#0F6;
    width:100%;
    height:auto;
    text-align:center;
    margin:auto 0;  
}
.card-container ul{
    text-align:center;
    margin:auto 0;
}
.card-container li{
    list-style-type:none;
    padding:.5em .5em .5em .5em;
    float:left;
    text-align:left;
}
.card{
    transition: 0.2s;
    overflow:hidden;
    width:7em;
    word-wrap:break-word;
}

.card-image{
    box-shadow:1 1 #000;
    transition:.3s;
    background-color:#C33;
    margin:auto 0;
    text-align:center;
}

.card-image:hover{
    transform:scale(1.25,1.25);
    transform-origin: 50% 50%;
    box-shadow:2 2 #0f0;
}
.card-theme{
    padding: .1em .1em .1em .1em;
    background-color:#999;
    word-wrap: break-word;
}
.card:hover{
box-shadow: 0 5px 5px 0 rgba(0,0,33,1);
}

我的目标是将卡片分组居中而不是偏左。

指导将不胜感激。

谢谢。

Answer 1

您可以为 .card-container 使用 flexbox

.card-container {
  background-color: #0F6;
  width: 100%;
  height: auto;
  margin: auto 0;
  display: flex;
  justify-content: center;
}

.card-container ul {
  text-align: center;
  margin: auto 0;
}

.card-container li {
  list-style-type: none;
  padding: .5em .5em .5em .5em;
  text-align: left;
}

.card {
  transition: 0.2s;
  overflow: hidden;
  width: 7em;
  word-wrap: break-word;
}

.card-image {
  box-shadow: 1 1 #000;
  transition: .3s;
  background-color: #C33;
  margin: auto 0;
  text-align: center;
}

.card-image:hover {
  transform: scale(1.25, 1.25);
  transform-origin: 50% 50%;
  box-shadow: 2 2 #0f0;
}

<ul class="card-container">
  <li>
    <div class="card">
      <div class="card-image">
        <img src="http://placehold.it/100">
      </div>
      <div class="card-theme">
        <a href="#">Should you be here?</a>
      </div>
    </div>
  </li>
  <li>
    <div class="card">
      <div class="card-image">
        <img src="http://placehold.it/100">
      </div>
      <div class="card-theme">
        <a href="#">Should you be here?</a>
      </div>
    </div>
  </li>
  <li>
    <div class="card">
      <div class="card-image">
        <img src="http://placehold.it/100">
      </div>
      <div class="card-theme">
        <a href="#">Should you be here?</a>
      </div>
    </div>
  </li>
</ul>