垂直對齊中心不適用於div文本對齊

Question

我試圖垂直對齊，但找不到解決方案。 我已經閱讀了很多堆棧溢出問題，但是我不確定自己在做什么錯。 這是我的HTML：

<body>
<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <form class="order-form">
                <div class="row first-row">
                    <div class="col-xs-12 col-sm-2 v-middle">
                        <span>Order 123456789</span>
                    </div>
                    <div class="col-xs-12 col-sm-2 v-middle">
                        <span>Order Date: 8/28/18</span>
                    </div>
                    <div class="col-xs-12 col-sm-2 v-middle">
                        <span>Order Status: OP</span>
                    </div>
                    <div class="col-xs-12 col-sm-2 v-middle">
                        <span>Ready Status: RD</span>
                    </div>
                    <div class="col-xs-12 col-sm-4 v-middle">
                        <span>Facility 123 Dudley Chip-N-Saw</span>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</body>

這是我的SCSS：

$font-family: "roboto", "open-sans";
body {
font-family: $font-family;
padding-top: 5%;
.order-form {
    text-align: center;
    position: relative;
    display: block;
    label {
        display: block;
    }
    .first-row {
        font-size: 16px;
        .v-middle {
            display: inline-block;
            vertical-align: middle;
        }           
    }
}
}

我使用的是Bootstrap v3，因此無法使用Bootstrap 4提供的對齊類。 我不確定除顯示為行外，垂直對齊還需要什么。 我知道垂直對齊方式不適用於塊級項目。 請幫忙謝謝！

這是我的代碼筆： https ://codepen.io/sazad/pen/BOZWOV

但是請縮小屏幕以確保當換行時文本的中間垂直對齊。 謝謝！

Answer 1

您的.v-middle元素繼承了col-..元素的float，這就是為什么您不能垂直對齊它們的原因。 只需添加float: none該類中float: none即可對其進行修復。

您還將在display: inline-block之間存在空白display: inline-block元素。 有很多方法可以解決這些問題，我最喜歡的解決方法是在parent中添加font-size: 0 。

最終代碼：

<body>
<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <form class="order-form">
                <div class="row first-row">
                    <div class="col-xs-12 col-sm-2 v-middle">
                        <span>Order 123456789</span>
                    </div>
                    <div class="col-xs-12 col-sm-2 v-middle">
                        <span>Order Date: 8/28/18</span>
                    </div>
                    <div class="col-xs-12 col-sm-2 v-middle">
                        <span>Order Status: OP</span>
                    </div>
                    <div class="col-xs-12 col-sm-2 v-middle">
                        <span>Ready Status: RD</span>
                    </div>
                    <div class="col-xs-12 col-sm-4 v-middle">
                        <span>Facility 123 Dudley Chip-N-Saw</span>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</body>

$font-family: "roboto", "open-sans";
body {
    font-family: $font-family;
    padding-top: 5%;
    .order-form {
        text-align: center;
        position: relative;
        display: block;
        label {
            display: block;
        }
        .first-row {
            font-size: 0;
            .v-middle {
                display: inline-block;
                vertical-align: middle;
                float: none;
                font-size: 16px;
            }           
        }
    }
}

也是一個小建議。 不要大量嵌套選擇器（例如， order-form不需要嵌套在body ）。

垂直對齊中心不適用於div文本對齊

問題描述

1 個解決方案

解決方案1
1 已采納 2018-09-04 16:03:58

垂直對齊中心不適用於div文本對齊

問題描述

1 個解決方案

解決方案1 1 已采納 2018-09-04 16:03:58

解決方案1
1 已采納 2018-09-04 16:03:58