I'm currently attempting to center an absolute button within a div at the bottom, but unfortunately it doesn't seem to be working as expected. Here is my current approach:
.mc-item {
background: #F0F0F0;
border: 1px solid #DDD;
height: 140px;
padding: 20px;
}
.mc-item a {
position: absolute;
bottom: -19px;
left: 50%;
}
.mc-item p {
text-align: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="col-md-4 col-sm-12">
<div class="mc-item">
<p>Changez votre adresse email ou votre mot de passe.</p>
<a asp-controller="MyAccount" asp-action="Settings" class="btn btn-primary">Paramètres</a>
</div>
</div>
As seen below, this produces the following result:
https://i.sstatic.net/uesyD.png
I am aiming for the button to be centrally aligned. Is the left: 50%
taking the entire .col div
into account? I've attempted wrapping the button
in a div
, causing the div
's width to match that of the .col div
(not the div
containing the <p>
).