Question

我试图简化我的问题，我在网上搜索过;但是我没有把这个数字垂直居中;请协助。我已经包含了CSS和HTML。

此文字不需要，网站只需要我添加更多文字供我提交。

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
        .colors2, .colors3 {
        background-color: lightgrey;
        height: 80px;
        text-align: center;
        font-weight: bold;
        font-size: 26px;
        }

        .colors2:hover, .colors3:hover {
            background-color: grey;
        }

        .colors3 {
            font-weight: normal;
        }
    </style>

</head>
<body>
    <div class="container-fluid">
        <div class="row colors1">
            <div class="col-sm-2 colors3">
                <span>6</span>
            </div>
            <div class="col-sm-2 colors2">
                <span>7</span>
            </div>
            <div class="col-sm-2 colors2">
                <span>8</span>
            </div>
            <div class="col-sm-2 colors2">
                <span>9</span>
            </div>
            <div class="col-sm-2 colors3">
                <span>5</span>
            </div>
            <div class="col-sm-2">
                <span></span>
            </div>
        </div>
    </div>
</body>
</html>

Answer 1

使用css3 flex属性。这很有效。

＆＃13;

  .colors2, .colors3 {
        background-color: lightgrey;
        height: 80px;
        text-align: center;
        font-weight: bold;
        font-size: 26px;
        }

        .colors2:hover, .colors3:hover {
            background-color: grey;
        }

        .colors3 {
            font-weight: normal;
        }
        
        .col-sm-2 {
            align-items: center;
            justify-content: center;
            display: flex;
        }

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
    <div class="container-fluid">
        <div class="row colors1">
            <div class="col-sm-2 colors3">
                <span>6</span>
            </div>
            <div class="col-sm-2 colors2">
                <span>7</span>
            </div>
            <div class="col-sm-2 colors2">
                <span>8</span>
            </div>
            <div class="col-sm-2 colors2">
                <span>9</span>
            </div>
            <div class="col-sm-2 colors3">
                <span>5</span>
            </div>
            <div class="col-sm-2">
                <span></span>
            </div>
        </div>
    </div>
</body>
</html>

＆＃13;

中心垂直在分词div而不是容器中

1 个答案: