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添加到该类中即可对其进行修复。

在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内）。

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

1 个答案: