水平对齐这些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

.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>

Answer 2

＆＃13;

＆＃13;

.card-container {
    text-align:center;
    margin:auto 0;
}
.card-container li{
    list-style-type:none;
    padding:.5em .5em .5em .5em;
	display:inline-block;
    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);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

你可以在display:inline-block;标签内使用li，还有一件你已经完成的事情，我已经修好了你可以在CSS的第一行看到。

您在text-align:center; margin:auto 0;而非.card-container ul

中提及.card-container