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

Posted 2023-03-29

【中文标题】仅在移动设备上的垂直和水平中心

【英文标题】：vertical and horizontal center on mobile only

【发布时间】：2019-06-09 04:57:00

【问题描述】：

我希望仅在我的部分具有固定高度的移动设备中将一列居中。

<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>

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

【参考方案1】：

您想探索 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】：

您应该在 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。