After researching various strategies on how to achieve this, and implementing the suggestions provided, I am still encountering difficulties. While the text successfully centers, the actual elements remain aligned to the left of the screen.
Below is the form structure:
<div class="row">
<div class="col-md-6">
<div class="formdiv">
<form id="my-form" method="post">
<div asp-validation-summary="All" class="text-danger"></div>
<div class="form-group">
<label asp-for="OrderEmail"></label>
<br />
<input asp-for="OrderEmail" />
</div>
<button id="update-profile-button" type="submit" class="btn btn-primary">Send</button>
</form>
</div>
</div>
</div>
Here is the corresponding CSS:
.formdiv {
display: block;
text-align: center;
}
#my-form {
display: inline-block;
margin-left: auto;
margin-right: auto;
text-align: left;
}