Как выровнять по вертикали один столбец в сетке с двумя столбцами (материализация) - PullRequest
Новая
       4

Как выровнять по вертикали один столбец в сетке с двумя столбцами (материализация)

0 голосов
/ 30 июня 2018

Я проектирую макет с двумя столбцами, где некоторые тексты располагаются в левой колонке, а большой img - справа. Я использую col s12 l6, чтобы на меньшем экране эти два элемента складывались вместе.

Я хочу, чтобы левый текст был выровнен по вертикали на большом экране, но нормально работал на меньшем экране. Я использую Materialise. 

<div class = "container">
    <div class = "row" style="border:solid">
        <div class = "col s12 l6" style="border:solid">
            <p>I want to vertically align in my parent container in big screen,but perform normally when in small screen</p>
       </div>
    <div class = "col s12 l6" style="border:solid">
        <img src="https://comotion.uw.edu/wp-content/uploads/2017/06/image.jpg" ></img>
    </div>
</div>

Я хочу на большом экране: big screen Я хочу на маленьком экране: small creen

Я пример ссылки

1 Ответ

0 голосов
/ 30 июня 2018

Раствор (Flexbox)

HTML 

<div class = "container">
    <div class = "row Aligner" style="border:solid">
        <div class="row Aligner-item--top"></div>
        <div class = "col s12 l6  Aligner-item" style="border:solid">
            <p>I want to vertically align in my parent container in big screen,but perform normally when in small screen</p>
       </div>
       <div class="row Aligner-item--bottom"></div>
    <div class = "col s12 l6" style="border:solid">
        <img src="https://comotion.uw.edu/wp-content/uploads/2017/06/image.jpg" ></img>
    </div>
</div>

CSS 

@media only screen and (min-width: 900px) {
.Aligner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.Aligner-item--top {
  align-self: flex-start;
}

.Aligner-item--bottom {
  align-self: flex-end;
}
}

Codepen: https://codepen.io/chrisbradshaw/pen/XYOdXL

  1. Добавьте div с классом "row Aligner-item - top" выше и классом "Aligner-item - bottom" ниже целевого div.
  2. Добавить класс "Aligner" к родительскому разделу.
  3. Установите класс "Aligner" для отображения: flex, align-items: center и justify-content: center в CSS.
  4. Добавить "align-self: flex-start;" в начало div и "align-self: flex-bottom;" до нижнего дел.
  5. Добавьте медиазапрос, чтобы это поведение реализовывалось только в окнах просмотра с разрешением менее 900 пикселей.

Оригинальное решение (неоптимально, поле с жестким кодированием):

CSS 

@media only screen and (min-width: 900px) {
  .v-align {
    margin-top: 10vh;
  }
}

Обновлен код: https://codepen.io/chrisbradshaw/pen/bKzNMR

  1. Я добавил класс "v-align" в div, содержащий абзац, и применил margin-top 10vh в CSS для вертикального центрирования текста. Вы также можете поэкспериментировать с CSS Flexbox, чтобы получить более точную информацию.

  2. Основываясь на отзывах Маноджа Кумара, я добавил медиазапрос к .v-align margin-top, чтобы он применялся только для видовых экранов размером более 900 пикселей. Вы можете поэкспериментировать с этим, чтобы сделать его идеальным.

...