我怎样才能将 div 与“collapse”类（Bootstrap）居中？

Question

目前我有以下内容：我希望可折叠卡片位于文本和图标下方的中心。我该怎么做？我尝试过在 div 上使用 CSS，但是似乎没有任何东西可以改变它们的位置？我到目前为止的代码：<div class="categoryList">            @result            @if (result == "")            {                foreach (String dataLine in userData)                {            <p>                <a data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">                    @dataLine.Split(delimiterChar)[0]                </a>                <button class="btn"><i class="fas fa-plus secondaryPlusIcon"></i></button>                <button class="btn"><i class="far fa-edit secondaryPlusIcon"></i></button>                <button class="btn"><i class="far fa-trash-alt secondaryPlusIcon"></i></button>            </p>                <div class="collapse" id="collapseExample">                    <div class="card card-body w-25 p-3">                    </div>                </div>                }            }        </div>

Answer 1

你可以尝试这个作为替代方案。

<div class="collapse" id="collapseExample">

 <div class="card card-body w-25 p-3 desiredclassname">

  ...

 </div>

</div>

CSS代码：

.desiredclassname{

 margin: auto;

}

希望能帮助到你 ：）

Answer 2

您可以使用 CSS flexbox 来获得精确居中

.collapse{

  display: flex;

  justify-content: center;

}

或者，您可以将其包装在<center>标签中：

<center>

  <div class="collapse" id="collapseExample">

  ...

</center>

然而，不鼓励使用中心标签。它可以被替换为

<div style="text-align: center;">

  <div class="collapse" id="collapseExample">

  ...

</div>

希望这些答案之一有帮助！