如何在容器内居中卡片（引导程序）[重复]

Posted 2023-03-05

【中文标题】如何在容器内居中卡片（引导程序）[重复]

【英文标题】：How to center a card inside a container ( bootstrap) [duplicate]

【发布时间】：2021-12-26 21:42:37

【问题描述】：

我有一个容器，里面有一张卡片。我尝试使用 justify-content-center、mx-auto 和硬编码 css 属性将卡片带到容器的中心，但没有得到实际输出。

这是我的 html 文件

<div class="container bg-warning">
    <div class="row  mx-auto centermycard">
        <div class="card mx-auto ">
            <div class="card-title"><h2 class="text-center">Find Lyrics For Your Song</h2></div>
            <div class="card-body ">
                <div class="container">
                    @using (Html.BeginForm("FetchLyrics", "LandingPage", FormMethod.Get, Model))
                    
                        @Html.ValidationSummary(true, "Please fix the below errors")

                        <div class="form-group">
                            @Html.LabelFor(model => model.songname, "I want a Song")
                            @Html.TextBoxFor(model => model.songname, new  @class = "form-control" )
                            @Html.ValidationMessageFor(m => m.songname)
                        </div>


                        <div class="form-group">
                            @Html.LabelFor(model => model.moviename, "From Movie")
                            @Html.TextBoxFor(model => model.moviename, new  @class = "form-control" )
                        </div>

                        <div class="form-group">
                            @Html.LabelFor(model => model.artist, "By Artist")
                            @Html.TextBoxFor(model => model.artist, new  @class = "form-control" )
                        </div>


                        <div class="form-group">
                            @Html.LabelFor(model => model.genre, "In genre")
                            @Html.TextBoxFor(model => model.genre, new  @class = "form-control" )
                        </div>

                        <div class="form-group">
                            <button class="btn btn-block btn-primary col-md-8 col-lg-8 text-center justify-content-center">Search</button>
                        </div>
                    
                </div>
            </div>
        </div>
    </div>
</div>

centermycard css 属性

.centermycard 
   margin:0 auto;

我错过了什么？

【问题讨论】：

使用对齐项目：居中；或 align-items-center 垂直居中。和 justify-content-center 或 justify-content: center;水平居中

卡片应该放在行内的列中，而不是直接放在行中

卡片应该放在行内的列中，而不是直接放在行中 - 这行得通...嘿，谢谢

【参考方案1】：

将mx-auto 类添加到卡上效果很好。 JSFiddle

但是，我不明白您为什么要在卡片本身中使用容器。您已经将整个东西封装在一个容器中。

【讨论】：

我对引导程序了解不多。我正在通过实施它来学习...感谢您的建议