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

回答

相关问题