如何在div中水平居中绝对按钮？ [复制]

Posted 2023-03-05

【中文标题】如何在div中水平居中绝对按钮？ [复制]

【英文标题】：How to center horizontally an absolute button in a div? [duplicate]

【发布时间】：2018-09-09 13:33:54

【问题描述】：

我正在尝试将绝对按钮置于 div 中（在底部），但它似乎不起作用..这是我现在正在做的事情：

.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>

这给出了以下结果：

我想要的是中间居中的按钮。 left: 50% 是否考虑了整个 .col div？我尝试将button 包裹在div 中，然后div 的宽度变为380，这与.col div 相同（不是div 和<p>）。

【参考方案1】：

Left:50% 将创建元素，从容器的中心位置开始。所以元素仍然不在中心，但Transform: translate(-50%,0) 会将元素移动到其宽度的 50% 的左侧。所以现在元素的中心与其容器的水平中心相遇。

.mc-item 

  background: #F0F0F0;
  border: 1px solid #DDD;
  height: 140px;
  padding: 20px;


.mc-item a 
  position: absolute;
  bottom: -19px;
  left: 50%;
  transform: translate(-50%,0)


.mc-item p 
  text-align: center;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<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>

【参考方案2】：

.mc-item 
    background: #F0F0F0;
    border: 1px solid #DDD;
    height: 140px;
    padding: 20px;
    position: relative;


.mc-item a 
    position: absolute;
    bottom: -19px;
    left: 50%;
    transform: translateX(-50%);


.mc-item p 
    text-align: center;

【参考方案3】：

尝试transform: translateX(-50%);你的按钮

【讨论】：

而不是什么？我应该删除 left: 50% 吗？我替换了它，它从 div 中消失了（在左侧）。

不，只需将其添加到您的按钮

完美运行，您能解释一下这是如何解决问题的吗？

left 属性的目标是按钮的左侧，翻译采用按钮的宽度，并将您的按钮-50% 的宽度向右翻译，所以 50%左边的按钮宽度