Struggling to center a row div vertically in an ASP.NET MVC project? Despite numerous attempts, the content remains at the top. Here's a quick fix with some eye-catching colors to illustrate the issue:
Site.css:
html, body {
height: 100%;
}
#mmenu_screen > .row {
min-height: 100vh;
}
/* Padding to prevent content from touching edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
/* Prevent truncation of long terms in left column of horizontal description lists */
.dl-horizontal dt {
white-space: normal;
}
/* Limit width of form input elements to 280px */
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>
Your assistance is greatly appreciated.
https://i.sstatic.net/pEZqA.png
Edit:
Following advice from @Artūrs Orinskis (see code below), the content in the first column is now centered vertically relative to the image. However, the entire row containing the image still appears at the top as depicted in figure 2.
https://i.sstatic.net/qG8az.png
Edit 2:
Thanks to the guidance of @Artūrs Orinskis, I have found a solution that works perfectly. Sharing the final code below in case it can benefit others.
Final code:
<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>