垂直对齐中心不适用于 div 文本对齐答案

【问题标题】：Vertical Align Center not working for div text alignment垂直对齐中心不适用于 div 文本对齐
【发布时间】：2019-02-09 17:01:23
【问题描述】：

我正在尝试垂直对齐，但找不到解决方案。我已经阅读了很多堆栈溢出问题，但我不确定我做错了什么。这是我的 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

但请缩小屏幕以确保在换行时文本垂直居中对齐。谢谢！

【问题讨论】：

标签： html css twitter-bootstrap vertical-alignment

【解决方案1】：

您的.v-middle 元素从col-.. 元素继承float，这就是您不能垂直对齐它们的原因。只需将float: none 添加到该类即可修复它。

display: inline-block 元素之间的空格也会出现问题。有很多方法可以解决这些问题，我最喜欢的解决方法是将 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 中）。

【讨论】：