如何使按钮在卡内垂直和水平居中

如何解决如何使按钮在卡内垂直和水平居中

我当前正在使用此引导程序模板来创建帮助台票务应用程序： https://colorlib.com/polygon/cooladmin/form.html

在用户登录后的索引页面上，我有两张卡，用户可以通过这些卡选择是要前往应用的仪表板还是创建票证。我正在尝试将仪表板按钮和票证按钮都放在各自卡的中心。

Picture of Index page

<div class="container">
    <div class="text-center">
        <h1 class="display-4">Welcome</h1>
        <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
    </div>

    <div class="container" id="ticket-dashboard-container">
        <div class="row justify-content-center">
            <div class="card" id="index-page-my-tickets">
                <div class="card-header">
                    <strong>My</strong> Tickets
                </div>
                <div class="container" >
                    <div class="row justify-content-center">
                        <button class="btn btn-info btn-sm" asp-action="EmployeeMyTicketsView" style="height: 30.8px; width: 86.6px">Tickets</button>
                    </div>
                </div>                    
            </div>

            <div class="card" id="index-page-dashboard">
                <div class="card-header">
                    <strong>Dashboard</strong>
                </div>
                <div class="container">
                    <div class="row justify-content-center">
                        <button class="btn btn-info btn-sm" style="height: 30.8px; width: 100.6px">Dashboard</button>
                    </div>
                </div>
            </div>
        </div>
     </div>
</div>

如何正确地将两个按钮居中？

Github链接： https://github.com/zhadjah9559/HelpDeskTicket/tree/3.LoginAndDB

解决方法

在align-items-center之后添加justify-content-center类，可以解决该问题。如果没有，请提供您的代码的实时示例。

<div class="row justify-content-center align-items-center"> <!-- <-- here -->
    <button></button>
</div>

,

使用margin: auto;和width: 50%;

在我的示例中，我向包含button元素的容器添加了一个名为holder的类，并向该类添加了CSS。我还向.card添加了高度，以显示元素居中。

.card {
height: 150px;
}

.holder{
  margin: auto;
  width: 50%;
}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
    <div class="text-center">
        <h1 class="display-4">Welcome</h1>
        <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
    </div>

    <div class="container" id="ticket-dashboard-container">
        <div class="row justify-content-center">
            <div class="card" id="index-page-my-tickets">
                <div class="card-header">
                    <strong>My</strong> Tickets
                </div>
                <div class="container holder" >
                    <div class="row justify-content-center">
                        <button class="btn btn-info btn-sm" asp-action="EmployeeMyTicketsView" style="height: 30.8px; width: 86.6px">Tickets</button>
                    </div>
                </div>                    
            </div>

            <div class="card" id="index-page-dashboard">
                <div class="card-header">
                    <strong>Dashboard</strong>
                </div>
                <div class="container holder">
                    <div class="row justify-content-center">
                        <button class="btn btn-info btn-sm" style="height: 30.8px; width: 100.6px">Dashboard</button>
                    </div>
                </div>
            </div>
        </div>
     </div>
</div>

,

此帮助是否有用：https://www.w3schools.com/howto/howto_css_center_button.asp

您必须使用翻译并将其设置为-50％