Центр выравнивания по вертикали не работает для выравнивания текста div - PullRequest
Новая
       19

Центр выравнивания по вертикали не работает для выравнивания текста div

0 голосов
/ 04 сентября 2018

Я пытаюсь выровнять по вертикали и не могу найти решение. Я прочитал так много вопросов о переполнении стека, и я не уверен, что делаю неправильно. Вот мой 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

но Пожалуйста, уменьшите экран, чтобы убедиться, что при разрыве строки текст вертикально выровнен по середине. Спасибо!

1 Ответ

0 голосов
/ 04 сентября 2018

Ваши .v-middle элементы наследуют float от col-.. элементов, поэтому вы не можете выровнять их по вертикали. Просто добавьте 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).

...