水平對齊這些CSS div

我想中心以下代碼的中心卡容器元素的UL列表。但是，在檢查教程和堆棧溢出之後，我似乎無法找到阻止我實現此目標的問題。水平對齊這些CSS div

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); 
}

我的目標是，卡的分組將被集中，而不是偏離中心向左。

指導將不勝感激。

謝謝。

來源

2017-07-14 Aaron

，而你正在使用'float'不能正確居中的元素提到text-align:center; margin:auto 0;。用'display：inline-block'替換它，然後通過父元素上的文本對齊進行居中。 – CBroe

我剛更換了浮球，它工作。我還有更多要了解CSS。謝謝。 – Aaron

@CBroe快速解決了這個問題。 – Aaron

可以使用Flexbox的用於.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>

來源

2017-07-14 11:05:34 Gerard

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

您可以使用display:inline-block;內li標籤還有一件事是你已經做了那是我固定你可以看到第一行CSS。

你已經在.card-container ul代替.card-container

來源

2017-07-14 13:58:16

水平對齊這些CSS div

回答

相關問題