html - 如何将 标签的内容居中？

Question

我试着把这些卡片放在中心，代码链接是这样的:

 https://jsfiddle.net/pm76o3ve 

这是我在 div 中的卡片图片

Answer 1

制作卡片 inline-block，移除 float 并添加 text-align: center; 到父级。

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

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

或者在父级上使用 flexbox，分配 flex-wrap: wrap; 允许卡片环绕，并应用 justify-content: center; 使卡片居中.

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

<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="cards">
    <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>
    </div>
</section>