Question

我正在启动一个新的asp.net mvc项目，无论我尝试什么，我都无法将包含图像和垂直下拉列表的行div居中对齐。我附加了一张图片，您可以在其中看到内容如何停留在顶部，并使用可怕的颜色以便快速查看。

Site.css：

html, body {
    height: 100%;
}

#mmenu_screen > .row {
    min-height: 100vh;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

.flag {
    width: 100px;
}

Layout.cshtml：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="d-flex flex-column h-100" style="background-color: antiquewhite;">
        @RenderBody()
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

Index.cshtml：

<div class="container-fluid h-100 d-flex flex-column" style="background-color: aqua">
    <div class="row h-100" style="flex:1;">
        <div class="col-md-4">
            <div class="row">
                <div class="col-md-6">
                    @Html.LabelFor(model => model.Year)
                </div>
                <div class="col-md-6">
                    @Html.DropDownListFor(model => model.Year, new SelectList(Model.Years, "Value", "Text"), new { @class = "form-control year-dropdown", style = "font-size:120%;" })
                </div>
            </div>
            <div class="row p-2"></div>
            <div class="row">
                <div class="col-md-6">
                    Edad en el momento del accidente
                </div>
                <div class="col-md-6">
                    @Html.DropDownListFor(model => model.Year, new SelectList(Model.Ages, "Value", "Text"), new { @class = "form-control year-dropdown" })
                </div>
            </div>
        </div>
        <div class="col-md-8">
            <img src="~/Content/img/accident-1497298.jpg" alt="car_accident" class="img-fluid w-100" />
        </div>
    </div>
</div>

任何帮助将不胜感激。

编辑：

现在，在建议@ArtūrsOrinskis（以下代码）之后，第一列的内容在垂直方向上位于图像的居中位置，但是包含图像的整行（即我期望相对于视口在垂直方向上居中）顶部如图2所示。

编辑2：

@ArtūrsOrinskis朝正确的方向指出了我，经过反复试验，我得到了一个可行的解决方案，我将在下面粘贴代码，以防其他人受益。

最终代码：

<div class="container-fluid d-flex flex-column flex-fill">
        <div class="row" style="background-color: yellowgreen; height: 100vh">
            <div class="col-4 d-flex bg-success">
                <div class="d-flex flex-column flex-fill my-auto bg-info">
                    <div class="form-group">
                        <input class="form-control">
                    </div>
                    <div class="form-group">
                        <input class="form-control">
                    </div>
                </div>
            </div>
            <div class="col-8 d-flex bg-warning">
                <div class="d-flex flex-fill my-auto bg-info">
                    <img src="~/Content/img/accident-1497298.jpg" alt="car_accident" class="img-fluid w-100" />
                </div>
            </div>
        </div>
    </div>

Answer 1

尝试这种方法。

设计要点是：

仅将html和body标签的高度保持100％
大多数元素使用引导程序的.flex-fill完全适合视口中的内容，而.flex-column则可以垂直跨越页面。这有助于控制垂直对齐
蓝色背景（.bg-info），以便您可以看到内容如何从中心跨页面垂直开始尽可能多地扩展

body, html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<html>
  <body>
    <div class="container-fluid d-flex flex-column flex-fill">
      <div class="row flex-fill">
        <div class="col-4 d-flex bg-success">
          <div class="d-flex flex-column flex-fill my-auto bg-info">
            <div class="form-group">
              <input class="form-control">
            </div>
            <div class="form-group">
              <input class="form-control">
            </div>
          </div>
        </div>
        <div class="col-8 d-flex flex-column bg-warning">
          <div class="d-flex flex-fill my-auto bg-info">
            <img class="img-fluid w-100" src="data:image/svg+xml, %3Csvg viewBox='0 0 612 612' xmlns='http://www.w3.org/2000/svg' focusable='false'%3E%3Ctitle%3EBootstrap%3C/title%3E%3Cpath d='M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z'%3E%3C/path%3E%3Cpath fill='currentColor' d='M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z'%3E%3C/path%3E%3C/svg%3E">
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Bootstrap 4无法将div垂直居中

1 个答案: