垂直居中对齐不适用于 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: none 添加到 class 即可修复它。

您还会遇到 display: inline-block 元素之间的空格问题。有很多方法可以解决这些问题，我最喜欢的解决方法是将 font-size: 0 添加到 parent.

最终代码：

<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 文本对齐

Vertical Align Center not working for div text alignment

html

css

vertical-alignment

twitter-bootstrap