I am struggling to center a card inside a container using CSS properties like justify-content-center, mx-auto, and hardcoding. However, I have not been able to achieve the desired result. Here is the code snippet from my HTML file:
<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>
... (additional form elements)
<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>
The CSS properties for centering the card are defined as follows:
.centermycard {
margin: 0 auto;
}
Despite using these properties, the card is not centered as expected. Can someone help me identify what I have missed?