I am using Bootstrap and Visual Studio to make a portal webpage. I want a div centered on the page (with a background color). Then I want a div inside that div, again fully centered (this will be the login form).
Right now I'm using the grid system with 3 columns to get the middle of the page (horizontal centered). But the thing is that the first div isn't centered either.
Can someone explain me how to center a div horizontal and vertical, and then another div inside there fully centered.
I am using VS's shared layout, so where exactly do I need to put the Renderbody? In the first div or second div?
Thanks in advance.
Code I am currently using:
HTML of the shared layout:
<html xmlns="http://ift.tt/lH0Osb" style="height: 100%;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>@ViewBag.Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../Content/themes/bootstrap.css">
<link rel="stylesheet" href="../../Content/themes/stylesheet.css">
<script src="http://ift.tt/1qRgvOJ"></script>
<script src="http://ift.tt/1Cqnml8"></script>
</head>
<body style="height: 100%; background:#000;">
@RenderBody()
</body>
</html>
The view file:
<div class="vertical-center" style="height:100%; background-color:aliceblue; background-position:center;background-repeat:no-repeat;">
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4" style="background-color:lavenderblush;">
@using (Html.BeginForm("Login", "Account"))
{
<span style="color:red">@ViewBag.Message</span>
<fieldset class="vertical-center">
<ol>
<li>
@Html.TextBoxFor(m => m.Nickname)
</li>
<li>
@Html.PasswordFor(m => m.Password)
</li>
</ol>
<input type="submit" value="Log in" />
</fieldset>
}
</div>
<div class="col-sm-4"></div>
</div>
</div>
And then the customized stylesheet.css:
.vertical-center {
min-height: 100%;
min-height: 100vh;
display: flexbox;
align-items: center;
justify-content: center;
flex-direction: column;
}
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}
Aucun commentaire:
Enregistrer un commentaire