Я запускаю новый проект 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>
Любая помощь будет высоко ценится.
Edit:
Теперь, после предложения @ Artūrs Orinskis (код ниже), содержимое первого столбца отцентрировано по вертикали относительно изображения, но вся строка, содержащая изображение (это то, что я ожидаю отцентрировать по вертикали относительно области просмотра) по-прежнему вверху как на рисунке 2.
Редактировать 2:
@ Артурс Оринскис указал мне верное направление, и после некоторых проб и ошибок я получил рабочее решение, и я вставлю код ниже, если он кому-нибудь поможет.
Финальный код:
<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>
