时间戳

首页 > 解决方案 > 将左 div 垂直居中，同时保持右 div 标准

javascript - 将左 div 垂直居中，同时保持右 div 标准

问题描述

我正在使用 bootstrap 4，我正在尝试使用该功能：在网页上找到垂直对齐：https ://getbootstrap.com/docs/4.0/layout/grid/

我已经阅读了我的代码几次，但无法弄清楚我做错了什么。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="pt-md-4  row justify-content-md-center">
  <div class="col-md-5 col-lg-3">
    <div class="col align-items-center">
      <?php if($_POST){ if (isset($pin_sucess)){ ?>
      <div class="alert alert-success" role="alert">
        <h4 class="alert-heading">
          <?php echo $pin_sucess; ?>
        </h4>
      </div>
      <?php }} ?>
      <form name="timeclock" action="<?=$_SERVER['REQUEST_URI']?>" method="POST">
        <div class="form-group row">
          <label class="col-sm-2 col-form-label" for="pin">Pin</label>
          <div class="col-sm-10">
            <input type="text" name="pin" id="pin" class="form-control input-md" required="true">
          </div>
        </div>
        <div class="form-group row">
          <input type="hidden" name="csrf" value="<?php echo Token::generate();?>" />
          <div class="col-sm-2 offset-sm-2">
            <input type="submit" name="pin_submit" value="submit" class="btn btn-primary" />
          </div>
        </div>
      </form>
    </div>
  </div>
  <div class="col-md-7 col-lg-7">
    Variable width content
    <br />
    <br /> Variable width content
    <br />
    <br /> Variable width content
    <br />
    <br /> Variable width content
  </div>
</div>

页面上有 2 个 div，左侧的一个包含时钟表单，我希望它位于右侧的 div 之间。

我可能想更正正确的 DIV，如果它确实变长，它会变成右侧的滚动 div。

例如，如果右 div 长 2 英寸，那么左 div 将向下约 1 英寸左右。

标签： javascripthtmlcsstwitter-bootstrapbootstrap-4

解决方案

据我了解，您需要将表单 div（左侧）与右侧的内容 div（可以具有可变内容）垂直居中...为此，我刚刚介绍col align-self-center了包含形式

完整的工作片段如下：

.higherDiv {
  border: 1px solid black;
}

.higherDiv>.higherDiv {
  border: 1px dashed lightblue;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="pt-md-4  row justify-content-md-center higherDiv">
  <!-- FORM DIV -->
  <div class="col-md-5 col-lg-3 higherDiv col align-self-center">
    <div class="col align-items-center">
      <?php if($_POST){ if (isset($pin_sucess)){ ?>
      <div class="alert alert-success" role="alert">
        <h4 class="alert-heading">
          <?php echo $pin_sucess; ?>
        </h4>
      </div>
      <?php }} ?>
      <form name="timeclock" action="<?=$_SERVER['REQUEST_URI']?>" method="POST">
        <div class="form-group row">
          <label class="col-sm-2 col-form-label" for="pin">Pin</label>
          <div class="col-sm-10">
            <input type="text" name="pin" id="pin" class="form-control input-md" required="true">
          </div>
        </div>
        <div class="form-group row">
          <input type="hidden" name="csrf" value="<?php echo Token::generate();?>" />
          <div class="col-sm-2 offset-sm-2">
            <input type="submit" name="pin_submit" value="submit" class="btn btn-primary" />
          </div>
        </div>
      </form>
    </div>
  </div>
  <!-- VARIABLE CONTENT DIV -->
  <div class="col-md-7 col-lg-7 higherDiv">
    Variable width content
    <br />
    <br /> Variable width content
    <br />
    <br /> Variable width content
    <br />
    <br /> Variable width content
    <br />
    <br /> Variable width content
    <br />
    <br /> Variable width content
  </div>
</div>

推荐阅读