我在图像下面有这个逻辑，图像应该显示在中心，但是现在根本不这样做。我对下面的这段代码到底做错了什么？为了用户可读性，请帮助我更好地改进此逻辑。或者如何使徽标显示并位于中心？我的登录页面或注册页面何时加载到浏览器？请告知我，以便进行必要的更改。
@using eNtsaRegistrationTraining.Models
@model RegisterViewModel
@{
ViewBag.Title = "Register";
Layout = "~/Views/Shared/_RegisterLayout.cshtml";
}
<div class="container">
<div class="logo-switch col-sm-12 text-center col-md-12">
<img src="~/Images/eNtsa.png" /> // This is not visible at all and want it to be visible to the center to have company logo
</div>
<div class="clearfix"></div>
</div>
<div class="register-box">
<div class="register-logo">
<a href="@Url.RouteUrl("Login")"><b>eNtsa</b> Registration</a>
</div>
<div class="card">
<div class="card-body register-card-body">
<p class="login-box-msg">Register a new membership</p>
@using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @role = "form" }))
{
@Html.AntiForgeryToken()
<div class="input-group mb-3">
@Html.TextBoxFor(m => m.FirstName, new { @class = "form-control", type = "text", id = "firstName", autofocus = "autofocus", placeholder = "Full name", required = "required" })
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-user"></span>
</div>
</div>
</div>
<div class="input-group mb-3">
@Html.TextBoxFor(m => m.Email, new
{
@class = "form-control",
type = "email",
id = "inputEmail",
placeholder = "Email address",
required = "required",
pattern = @"[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$",
title = "Enter valid email (eg. example@example.com)"
})
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-envelope"></span>
</div>
</div>
</div>
<div class="input-group mb-3">
@Html.TextBoxFor(m => m.Password, new
{
@class = "form-control",
type = "password",
id = "inputPassword",
placeholder = "Password",
required = "required",
pattern = @"(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}",
title = "Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters"
})
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-lock"></span>
</div>
</div>
</div>
<div class="input-group mb-3">
@Html.TextBoxFor(m => m.ConfirmPassword, new { @class = "form-control", type = "password", id = "confirmPassword", placeholder = "Retype password", required = "required" })
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-lock"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-8">
<div class="icheck-primary">
<input type="checkbox" id="agreeTerms" name="terms" value="agree">
<label for="agreeTerms">
I agree to the <a href="https://entsa.mandela.ac.za/Terms-Conditions">terms</a>
</label>
</div>
</div>
<!-- /.col -->
<div class="col-4">
<button type="submit" class="btn btn-primary btn-block">Register</button>
</div>
<!-- /.col -->
</div>
}
<div class="social-auth-links text-center">
<section id="socialLoginForm">
@* @Html.Partial("_ExternalLoginListPartial", new ExternalLoginListViewModel {ReturnUrl = ViewBag.ReturnUrl })*@
</section>
</div>
<a href="@Url.RouteUrl("Login")" class="text-center">I already have a membership</a>
</div>
</div>
</div>
<div class="modal fade" id="modal-danger" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content bg-danger">
<div class="modal-header">
<h4 class="modal-title">Authentication Failed !</h4>
</div>
<div class="modal-body">
<p>@TempData["ErrorMessage"]</p>
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modal-success" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content bg-success">
<div class="modal-header">
<h4 class="modal-title">Registration</h4>
</div>
<div class="modal-body">
<p>User registered successfully. Please check your mail to activate your account.</p>
</div>
<div class="modal-footer justify-content-between">
<a class="btn btn-primary" href="/">OK</a>
</div>
</div>
</div>
</div>
<!--Javascript error handling-->
<script type="text/javascript">
function ShowErrorPopup() {
$("#modal-danger").modal();
}
function ShowSuccessPopup() {
$("#modal-success").modal();
}
</script>
@if(ViewBag.JavaScriptFunction !=null)
{
<script type="text/javascript">
@Html.Raw(ViewBag.JavaScriptFunction)
</script>
}
答案 0 :(得分：0)
您好，请注意，第一个div将孩子推到一边，并将它们彼此向后倾斜，使图像在第二个div元素内变得模糊。看看我做了什么。
@using eNtsaRegistrationTraining.Models
@model RegisterViewModel
@{
ViewBag.Title = "Register";
Layout = "~/Views/Shared/_RegisterLayout.cshtml";
}
<div class="register-box">
<div class="register-logo">
<img src="~/Images/eNtsa.png" />
<a href="@Url.RouteUrl("Login")"><b>eNtsa</b> Registration</a>
</div>
<div class="card">
<div class="card-body register-card-body">
<p class="login-box-msg">Register a new membership</p>
@using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @role = "form" }))
{
@Html.AntiForgeryToken()
<div class="input-group mb-3">
@Html.TextBoxFor(m => m.FirstName, new { @class = "form-control", type = "text", id = "firstName", autofocus = "autofocus", placeholder = "Full name", required = "required" })
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-user"></span>
</div>
</div>
</div>
<div class="input-group mb-3">
@Html.TextBoxFor(m => m.Email, new
{
@class = "form-control",
type = "email",
id = "inputEmail",
placeholder = "Email address",
required = "required",
pattern = @"[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$",
title = "Enter valid email (eg. example@example.com)"
})
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-envelope"></span>
</div>
</div>
</div>
<div class="input-group mb-3">
@Html.TextBoxFor(m => m.Password, new
{
@class = "form-control",
type = "password",
id = "inputPassword",
placeholder = "Password",
required = "required",
pattern = @"(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}",
title = "Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters"
})
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-lock"></span>
</div>
</div>
</div>
<div class="input-group mb-3">
@Html.TextBoxFor(m => m.ConfirmPassword, new { @class = "form-control", type = "password", id = "confirmPassword", placeholder = "Retype password", required = "required" })
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-lock"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-8">
<div class="icheck-primary">
<input type="checkbox" id="agreeTerms" name="terms" value="agree">
<label for="agreeTerms">
I agree to the <a href="https://entsa.mandela.ac.za/Terms-Conditions">terms</a>
</label>
</div>
</div>
<!-- /.col -->
<div class="col-4">
<button type="submit" class="btn btn-primary btn-block">Register</button>
</div>
<!-- /.col -->
</div>
}
<div class="social-auth-links text-center">
<section id="socialLoginForm">
@* @Html.Partial("_ExternalLoginListPartial", new ExternalLoginListViewModel {ReturnUrl = ViewBag.ReturnUrl })*@
</section>
</div>
<a href="@Url.RouteUrl("Login")" class="text-center">I already have a membership</a>
</div>
</div>
</div>
<div class="modal fade" id="modal-danger" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content bg-danger">
<div class="modal-header">
<h4 class="modal-title">Authentication Failed !</h4>
</div>
<div class="modal-body">
<p>@TempData["ErrorMessage"]</p>
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modal-success" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content bg-success">
<div class="modal-header">
<h4 class="modal-title">Registration</h4>
</div>
<div class="modal-body">
<p>User registered successfully. Please check your mail to activate your account.</p>
</div>
<div class="modal-footer justify-content-between">
<a class="btn btn-primary" href="/">OK</a>
</div>
</div>
</div>
</div>
<!--Javascript error handling-->
<script type="text/javascript">
function ShowErrorPopup() {
$("#modal-danger").modal();
}
function ShowSuccessPopup() {
$("#modal-success").modal();
}
</script>
@if(ViewBag.JavaScriptFunction !=null)
{
<script type="text/javascript">
@Html.Raw(ViewBag.JavaScriptFunction)
</script>
}