如何集中<div>标签的内容？

Question

我尝试将这些卡片放在中心位置，代码链接为：

 https://jsfiddle.net/pm76o3ve 

这是我在div中的卡片的图像

Answer 1

制作卡片.bash_profile，移除inline-block并将float添加到家长。

＆＃13;

＆＃13;

text-align: center;

＆＃13;

.samples-panel {
    background-color: #fff;
    text-align: center;
}

.card {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.3);
    transition: 0.3s;
    margin: 5px;
    width: 300px;
    padding: 0 0 0 0 !important;
    background-color: #fff;
    border-radius: 5px;
    display: inline-block;
    float: none!important; /* had to add !important to overwrite bootstrap */
}

.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.5);
}

.card img {
    border-radius: 5px 5px 0 0;
}

.cardtext {
    padding: 2px 16px;
}

＆＃13;

＆＃13;

＆＃13;

或者在父级上使用flexbox，指定<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <section class="samples-panel text-center"> <a href="#"><h1>samples</h1></a> <div class="card col-lg-3 col-md-4 col-sm-6"> <img src="http://static.adzerk.net/Advertisers/7c689b96e97042b295cbbcb8607962a5.jpg" alt="Avatar" style="width:100%"> <div class="cardtext"> <div class="cardtext"> <h4><b>Jane Doe</b></h4> <p>Interior Designer</p> </div> </div> </div> <div class="card col-lg-3 col-md-4 col-sm-6"> <img src="http://static.adzerk.net/Advertisers/7c689b96e97042b295cbbcb8607962a5.jpg" alt="Avatar" style="width:100%"> <div class="cardtext"> <div class="cardtext"> <h4><b>Jane Doe</b></h4> <p>Interior Designer</p> </div> </div> </div> <div class="card col-lg-3 col-md-4 col-sm-6"> <img src="http://static.adzerk.net/Advertisers/7c689b96e97042b295cbbcb8607962a5.jpg" alt="Avatar" style="width:100%"> <div class="cardtext"> <div class="cardtext"> <h4><b>Jane Doe</b></h4> <p>Interior Designer</p> </div> </div> </div> <div class="card col-lg-3 col-md-4 col-sm-6"> <img src="http://static.adzerk.net/Advertisers/7c689b96e97042b295cbbcb8607962a5.jpg" alt="Avatar" style="width:100%"> <div class="cardtext"> <div class="cardtext"> <h4><b>Jane Doe</b></h4> <p>Interior Designer</p> </div> </div> </div> <div class="card col-lg-3 col-md-4 col-sm-6"> <img src="http://static.adzerk.net/Advertisers/7c689b96e97042b295cbbcb8607962a5.jpg" alt="Avatar" style="width:100%"> <div class="cardtext"> <div class="cardtext"> <h4><b>Jane Doe</b></h4> <p>Interior Designer</p> </div> </div> </div> </section>以允许卡片换行，并应用flex-wrap: wrap;使卡片居中。

＆＃13;

＆＃13;

justify-content: center;

＆＃13;

.samples-panel {
    background-color: #fff;
    
}

.cards {
  display: flex;
    flex-wrap: wrap;
    justify-content: center;
 }

.card {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.3);
    transition: 0.3s;
    margin: 5px;
    width: 300px;
    padding: 0 0 0 0 !important;
    background-color: #fff;
    border-radius: 5px;
    float: none;
}

.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.5);
}

.card img {
    border-radius: 5px 5px 0 0;
}

.cardtext {
    padding: 2px 16px;
}

＆＃13;

＆＃13;

＆＃13;