これらの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

あなたはすでに行っていたあるliタグともう一つの内側display:inline-block;を使用することができます.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

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

<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の最初の行に見ることができます固定。

あなたは `float`を使用している間、あなたが適切に要素をセンタリングすることはできません.card-container ul代わりの.card-container