вертикально центральный элемент на экране onsen ui - PullRequest
Новая
       6

вертикально центральный элемент на экране onsen ui

0 голосов
/ 04 февраля 2019

Я использую Onsen и пытаюсь сделать элементы внутри ons-page вертикально выровненными по центру экрана, но не повезло, ниже я попробовал. 

<ons-page id="login-form" modifier="full_bg">
        <ons-row align="center">
            <ons-col width="50%" vertical-align="center">
                <div style="padding-left:5px">
                    <ons-button modifier="large">Signin</ons-button>
                </div>
            </ons-col>
            <ons-col width="50%" vertical-align="center">
                <div style="padding-left:5px">
                    <ons-button modifier="large">Signin</ons-button>
                </div>
            </ons-col>
        </ons-row>
    </ons-page>

Любая помощь, идеи?

1 Ответ

0 голосов
/ 23 июля 2019

попробуйте добавить обертку.

HTML 

<div class="flexbox-container">
  <ons-row>...</ons-row>
</div>

CSS 

.flexbox-container {

   height: 100%;

   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   -ms-flex-align: center;
   -webkit-align-items: center;
   -webkit-box-align: center;
   align-items: center;
}

Ссылка: https://davidwalsh.name/css-vertical-center-flexbox

...