问题在 ASP.NET Core Razor 页面中居中输入框

Question

我似乎无法弄清楚如何在我的 ASP.NET Core Web 应用程序中将一些输入框居中。我一直在尝试 CSS 解决方案并使用不同的 HTML 解决方案，例如 class= "text-center"，但我还没有得到任何结果。这是我目前试图将这些框在页面上居中的代码：

@page
@model CustomerPageTest.Pages.Customer.AddCustomerModel

@{
    ViewData["Title"] = "AddCustomer";
}

@{ 
    Layout = null; //Added
}

<div class="container align-content-center" style="border:solid">
    <div class="row">
        <div class="col-md-6 col-md-offset-3 text-center">
            <div class="form-group">
                <label asp-for="Customer.name">Name:</label>
                <input asp-for="Customer.name" class="form-control text-center" type="text" />
            </div>
            <div class="form-group">
                <label asp-for="Customer.notes">Notes:</label>
                <input asp-for="Customer.notes" class="form-control text-center" />
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-dark text-center" />
            </div>
        </div>
    </div>
</div>

这是我运行应用程序时得到的结果：

抱歉它的大小，我不知道如何放大它。不管怎样，一切都在左边。我应该导入某种类型的引导文件来解决这个问题吗？

Answer 1

根据您的代码和结果图像，我猜您没有成功导入引导程序或 jquery。所以 bootstarp 类不适用于您的 html 代码。

我建议你先在你的剃须刀页面中包含bootstarp CSS和JavaScript，并在行中添加justify-content-center，然后你会发现你的所有控件都将成为中心。

参考：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

HTML 代码：

<div class="container align-content-center" style="border:solid">
    <div class="row justify-content-center">
        <div class="col-md-6 col-md-offset-3 text-center">
            <div class="form-group">
                <label asp-for="Customer.name">Name:</label>
                <input asp-for="Customer.name" class="form-control text-center" type="text" />
            </div>
            <div class="form-group">
                <label asp-for="Customer.notes">Notes:</label>
                <input asp-for="Customer.notes" class="form-control text-center" />
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-dark text-center" />
            </div>
        </div>
    </div>
</div>

结果：

如果你想要标签和输入应该在同一行，你应该修改html代码，让一个表单控制在一行内，如下所示：

<div class="container" style="border:solid">
    <div class="form-horizontal col-md-offset-3 justify-content-center">
        <div class="form-group ">
            <label asp-for="Customer.name" class=" col-md-2 control-label">Name:</label>
            <div class="col-md-4">
                <input asp-for="Customer.name" class="form-control text-center" type="text" />
            </div>
        </div>
        <div class="form-group ">

            <label asp-for="Customer.notes" class=" col-md-2 control-label">notes:</label>
            <div class="col-md-4">
                <input asp-for="Customer.notes" class="form-control text-center" type="text" />
            </div>
        </div>
        <div class="form-group ">
            <div class="col-md-6 text-center">
                <input type="submit" value="Create" class="btn btn-dark text-center" />
                </div>
            </div>
        </div>
</div>

结果：