如何在两列网格系统中垂直对齐一列（实现）

Question

我正在设计一个两列的布局，其中一些文本位于左列，而一个大img位于右侧。我使用col s12 l6，以便在较小的屏幕上将两者堆叠在一起。

我希望左文本在大屏幕中垂直对齐，但在小屏幕中正常运行。 我正在使用Materialize。

<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

1. 在目标div下方添加一个类别为“ row Aligner-item--top”的类，并在其下方添加一个类“ Aligner-item--bottom”的div。
2. 将“ Aligner”类添加到父div。
3. 在CSS中将“ Aligner”类设置为显示：flex，align-items：center和justify-content：center。
4. 添加“ align-self：flex-start;”在div和“ align-self：flex-bottom”之前；到底部div。
5. 添加媒体查询，以便仅在900px以下的视口上实现此行为。

原始解决方案（不是最佳解决方案，“硬编码”边距顶端）：

CSS

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

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

1. 我在包含段落的div上添加了“ v-align”类，并在CSS中将10vh的margin-top应用于文本的垂直居中。您也可以尝试使用CSS Flexbox来获得更精确的结果。

2. 基于Manoj Kumar的反馈，我向.v-align margin-top添加了媒体查询，以便仅将其应用于大于900px的视口。您可以尝试一下以使其完美。