Как я могу центрировать div с классом «collapse» (Bootstrap)?

Question

В настоящее время у меня есть следующее:

Я бы хотел, чтобы складные карточки были центрированы под текстом и значками. Как бы я go об этом? Я пытался использовать CSS на div, но, кажется, ничто не меняет их положение?

Код, который у меня есть:

<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;
}

Более подробная информация здесь https://www.w3schools.com/css/css3_flexbox.asp

Или вы можете обернуть его в тег <center>:

<center>
  <div class="collapse" id="collapseExample">
  ...
</center>

Тем не менее, центральный тег не рекомендуется. Его можно заменить на

<div style="text-align: center;">
  <div class="collapse" id="collapseExample">
  ...
</div>

Надеюсь, один из этих ответов поможет!