使div在div中心响应div内容

Question

嗨，我是新手，我正在尝试在大屏幕上实现此效果 但是div-2中的文本位于div的垂直中心。

我正在尝试将Lorem ipsum文本放在此图像中div-2的中心

但是，如果我从顶部添加填充，则文本在大屏幕上居中显示，但是当我将屏幕尺寸缩小到中小屏幕时，顶部仍然有不必要的填充，所以我得到了这种布局。

此图片中div-2的顶部不必要的填充

我只想让div-2中的文本在lg设备上位于垂直中心，并在sm和md设备上位于img下方，而没有顶部填充。 对不起，如果我不清楚，您的帮助将不胜感激。

Answer 1

<div class="div-2">
<span class="contant">
LOREM IPSUM
LOREM IPSUM
</span>
</div>

customer_id

Answer 2

这是我的解决方法

全屏打开代码段并检查

添加d-flex align-items-lg-center align-items-sm-top可使文本在大屏幕上居中对齐，并在小屏幕上将文本对齐到顶部。

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col-lg-6,.col {
  border: solid 1px #6c757d;
  padding: 10px;
}
.image{
  height:100px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class=" col-lg-6 col-sm-12 image   text-center text-lg-left">
      Image
    </div>
    <div class=" col-lg-6 col-sm-12 justify-content-center d-flex align-items-lg-center align-items-sm-top">

      lorem ipsum

    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
  </div>
</div>

更新

在中小型设备上将text-center text-lg-left添加到中心图像​​，但仅在大型设备上向左对齐