如何垂直对齐两列网格系统中的一列（具体化）

Question

我正在设计一个双栏布局，其中一些文本位于左栏，一个大 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>

我想在大屏幕上：我想要小屏幕：

I am the example link

Answer 1

解决方案（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

添加一个div，上面"row Aligner-item--top"的class，目标div下面的class "Aligner-item--bottom"。
将 class "Aligner" 添加到父项 div。
将 "Aligner" class 设置为 display:flex，align-items: center 和 justify-content: center in CSS.
将 "align-self: flex-start;" 添加到顶部 div 并将 "align-self: flex-bottom;" 添加到底部 div。
添加媒体查询，以便此行为仅在 900 像素以下的视口上实施。

原始解决方案（不是最优的，"hard coding" margin-top）：

CSS

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

更新代码笔： https://codepen.io/chrisbradshaw/pen/bKzNMR

我在包含该段落的 div 上添加了 class "v-align" 并在 CSS 中应用了 10vh 的 margin-top 以垂直居中文本。您还可以尝试使用 CSS Flexbox 来获得更精确的结果。
根据 Manoj Kumar 的反馈，我将媒体查询添加到 .v-align margin-top，这样它只会应用于大于 900 像素的视口。您可以试验一下以使其完美。

如何垂直对齐两列网格系统中的一列（具体化）

How to vertically align one column in a two-column grid system(materialize)

html

css

materialize

解决方案（Flexbox）

原始解决方案（不是最优的，"hard coding" margin-top）：