Как центрировать элемент на большом дисплее, используя материализацию? - PullRequest
Новая
       18

Как центрировать элемент на большом дисплее, используя материализацию?

0 голосов
/ 02 мая 2018

Я использую Materialise CSS и пытаюсь центрировать div. Я пытаюсь сделать так, чтобы белые поля располагались по центру мобильного телефона, а рабочий стол - по центру страницы. Все белые поля находятся в одном и том же div, называемом root.

index.html 

 <body>
    <div class="container">

       <div id="mainContent" class="row">

          <div id="root" class="col s12 xl l6"></div>

       </div>
    </div>
 </body>

styles.css 

#mainContent {
    background-color: blue;
    margin: auto;
    display: block;
}

#root {
    margin: 0 auto;
    position: relative;
}

На мобильном устройстве он правильно центрирует белые поля. On mobile, it centers the white boxes correctly.

На рабочем столе ящики находятся с левой стороны. Desktop view

Если я добавлю margin-left к .root{}, то это не в центре мобильной версии.

Ответы [ 2 ]

0 голосов
/ 02 мая 2018

Я думаю, что лучше всего использовать смещения сетки на столбцах: 

<body>
    <div class="container">
        <div id="mainContent" class="row">
            <div class="col s12 l6 offset-l3"></div>
        </div>
    </div>
</body>

Добавление класса offset-l3 добавит смещение в 3 столбца слева для размеров экрана l и xl. Всего 12 столбцов и 6 столбцов содержимого смещение 3 приведет к центрированию содержимого.

style.css можно обновить, чтобы установить только background-color: 

#mainContent {
    background-color: blue;
}
0 голосов
/ 02 мая 2018

Я добавил оболочку в index.html примерно так: 

<div id="mainContent" class="row">
    <div class="valign-wrapper">
        <div id="root" class="col s12 xl l6"></div>
    </div>
</div>

Теперь белые квадраты центрированы по центру как на экранах с меньшим разрешением, так и на большем.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...