Question

我只想将栏的高度固定在移动设备中的中心位置。

<div class="" style="background-image: url(image url;); background-position: right bottom; background-size: cover; height: 462px;">
<div class="container">
  <div class="row h-100">
    <div class="d-md-block d-none col-md-5" style=""><img class="img-fluid mx-auto d-block" src="image url"></div>
    <div class="col-12 my-auto col-md-7">
      <h1 class="display-4">Display 4</h1><a class="btn btn-primary" href="#">Button</a>
    </div>
  </div>
</div>

任何想法如何实现这一目标？

Answer 1

您应该在CSS中使用“ @media only screen”（仅限媒体）来更改不同分辨率的设置。

.mysection{
background-image: url("https://via.placeholder.com/728x462.png?text=placeholder"); 
background-position: right bottom; 
background-size: cover; 
height: 462px;
}





@media only screen and (max-width: 600px) {
  .mysection {
    text-align : center;
  }
}

<div class="mysection">
<div class="container">
  <div class="row h-100">
    <div class="d-md-block d-none col-md-5" ><img class="img-fluid mx-auto d-block" style="border: 1px solid;" src="https://via.placeholder.com/200x200.png?text=image"></div>
    <div class="col-12 my-auto col-md-7">
      <h1 class="display-4">Display 4</h1><a class="btn btn-primary" href="#">Button</a>
    </div>
  </div>
</div>

有关更多信息，您可以选中此link。

Answer 2

您想探索FlexBox吗？对于水平或垂直居中的项目，它非常方便。您想将代码放在父div中并设置

display:flex; 
align-items: center; //For horizontal centering
justify-content: center; //For vertical align

类似这样的内容：https://jsfiddle.net/jvknog1d/

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 462px;
}

<div class="parent">
  <div class="" style="background-image: url(image url;); background-position: right bottom; background-size: cover; ">
    <div class="container">
      <div class="row h-100">
        <div class="d-md-block d-none col-md-5" style=""><img class="img-fluid mx-auto d-block" src="image url"></div>
        <div class="col-12 my-auto col-md-7">
          <h1 class="display-4">Display 4</h1><a class="btn btn-primary" href="#">Button</a>
        </div>
      </div>
    </div>
  </div>

仅在移动设备上垂直和水平居中

2 个答案: