Вертикально выровнять содержимое внутри ячейки XY-Grid - PullRequest
Новая
       27

Вертикально выровнять содержимое внутри ячейки XY-Grid

0 голосов
/ 13 июня 2019

Используя XY-Grid ZURB Foundation, я хочу расположить по центру содержимое ячейки по вертикали, сохраняя при этом возможность заполнения ячеек общей высотой сетки (для каждой ячейки должен быть свой фоновый рисунок), что не позволяетразрешить использование класса ".align-middle" в родительской сетке, поскольку высота ячейки затем свернута.

Я хочу иметь возможность сделать это с помощью твердого решения, которое будет работать со многими различными типами контента., где вы не знаете имя и высоту сетки, поэтому я не ищу каких-то конкретных хаков.

Я попытался сделать ячейку flex-контейнером, добавив класс ".flex-container ", это позволяет мне добавить класс для вертикального выравнивания контента, но я не решаюсь отойти от предполагаемого использования XY-сетки, поскольку это может создать некоторые другие проблемы, которые я сейчас не планирую. 

<div class="grid-container">
            <div class="grid-x" style="height: 100px;">
                <div class="cell small-6 this-cell-has-background-and-need-to-stretch">
                    This is the text I want vertically center
                </div>
                <div class="cell small-6 this-cell-has-background-and-need-to-stretch">
                    This is the text I want vertically center
                </div>
            </div>
        </div>

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

1 Ответ

1 голос
/ 14 июня 2019

Вам понадобится еще один grid-x и центр выравнивания на контейнерах с фоном. Див внутри них будет по центру. Вот так: 

<div class="grid-container">
    <div class="grid-x" style="height: 100px;">
        <div class="cell small-6 grid-x align-middle" style="background:green;">
            <div>This is the text I want vertically center</div>
        </div>
        <div class="cell small-6 grid-x align-middle" style="background:red;">
            <div>This is the text I want vertically center</div>
        </div>
    </div>
</div>
...