Question

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-reboot.min.css">
    <link rel="stylesheet" href="bootstrap.min.css">
    <link rel="stylesheet" href="bootstrap-grid.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col col-lg-3"></div>
        <div class="col">
            <div class="row">
                <div class="left col-lg-5"></div>
                <div class="right col-lg-6">
                    <form>
                        <div class="form-group">
                            <label for="FIO">ФИО</label>
                            <input type="text" class="form-control" id="FIO">
                        </div>
                        <div class="form-group">
                            <label for="inputTelephone">Телефон</label>
                            <input type="text" class="form-control" id="inputTelephone">
                        </div>
                        <div class="form-group">
                            <label for="inputAddress">Адрес</label>
                            <input type="text" class="form-control" id="inputAddress">
                        </div>
                        <button type="submit" class="btn btn-secondary">Secondary</button>
                    </form>
                </div>
            </div>
        </div>
        <div class="col col-lg-3"></div>
    </div>
</div>

</body>
</html>

尝试了文档中列出的所有方法，即使示例也不起作用。尝试了文档中列出的所有方法，即使示例也不起作用。

Answer 1

如果我正确理解：

.my-auto{
  margin-top: auto;
  margin-bottom: auto;
}
html, body {
    height: 100%;
}
.container {
    height: 100%;
}
.h-100 {
    border: 1px dotted #cc2222;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <h5 class="text-muted">Vertical &amp; horizontal center using auto-margins..</h5>
    <!--vertical align on parent using my-auto, horizontal align on self mx-auto-->
    <div class="row h-100">
      <div class="col-sm-12 my-auto">
        <div class="row">
        <div class="col col-lg-3"></div>
        <div class="col">
            <div class="row">
                <div class="left col-lg-5"></div>
                <div class="right col-lg-6">
                    <form>
                        <div class="form-group">
                            <label for="FIO">ФИО</label>
                            <input type="text" class="form-control" id="FIO">
                        </div>
                        <div class="form-group">
                            <label for="inputTelephone">Телефон</label>
                            <input type="text" class="form-control" id="inputTelephone">
                        </div>
                        <div class="form-group">
                            <label for="inputAddress">Адрес</label>
                            <input type="text" class="form-control" id="inputAddress">
                        </div>
                        <button type="submit" class="btn btn-secondary">Secondary</button>
                    </form>
                </div>
            </div>
        </div>
        <div class="col col-lg-3"></div>
    </div>
</div>
      </div>
     </div>
       
</div>

希望获得帮助。

如何垂直居中对齐？

1 个答案: