使div响应于div中心的div内容。

Question

嗨，我是新的引导，我试图在大屏幕上实现这个效果，但是在div-2中的文本在div的垂直中心。

我试图将Lorem ipsum文本放在div-2的中心位置。

​

​

但是，如果我从顶部添加一个填充，文本就在大屏幕上的中心位置，但是当我缩小屏幕大小到中小屏幕时，我仍然有这个不必要的顶部填充，所以我得到了这个布局。

此图像中div-2中不需要的顶部填充。

​

​

我想要的只是div-2中的文本，在lg设备上处于垂直中心，在sm和md设备上，在img下面，没有顶部的填充。对不起，如果我不清楚，您的帮助将是非常感谢的。

Answer 1

这是我的解决办法

在全屏中打开代码段并检查

添加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添加到中小型设备的中心图像，但仅对大设备在左侧对齐

Answer 2

​

.div-2{
position:relative;
width:300px;
height:300px;
border:3px solid;
}
.contant{
position:absolute;
transform: translateY(-50%);
right: 0;
left: 0;
top:50%;
text-align:center;
}

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

​