Question

我有一个div，里面有一个按钮：

我让按钮位置为absolute，其样式代码为：

  .buy-btn {
    text-align: center;
    position: absolute;
    bottom: 10px;

  }

如何将其与中心对齐？我尝试添加margin: 0 auto;，但它不起作用。

Answer 1

/* Replace below css  and add position relative to its parent class*/

.buy-btn {
       text-align: center;
       position: absolute;
       bottom: 10px;
       left: 50%;
       display: inline-block;
       transform: translateX(-50%);
    }

Answer 2

你可以添加这些。

.buy-btn {
    /* ... */
    left:50%;
    transform: translateX(-50%);
}

Answer 3

这是一个使用flexbox的解决方案，希望你能从中学到一些东西。

＆＃13;

SetWindowsHookEx

＆＃13;

.container{
  display: flex;
  height: 200px;
  width: 500px;
  background-color: powderblue;
  justify-content: center;
}


button{
  height: 20px;
  align-self: center;
}

＆＃13;

Answer 4

您需要将\Joomla\CMS\Factory::getApplication(); $app->logout($user_id);与margin-left: auto; margin-right: auto;一起使用，如下所示： -

＆＃13;

position:absolute

＆＃13;

.btn-box{ position: relative; }
.btn-center {
    position: absolute;
    top: 10px;
    left: 0px;
    right: 0px;
    margin-left: auto;
    margin-right: auto;
    width:100px;
  }

＆＃13;

Answer 5

如果我理解了您的问题，那么它将如下工作。

你可以用三种方式做到这一点。

No1 - 使用位置。将宽度100％应用于按钮父div，并将按钮样式应用为下方。

.buy-btn{
    display: inline-block;       /* Display inline block */
    text-align: center;          /* For button text center */
    position: absolute;          /* Position absolute */
    left: 50%;                   /* Move 50% from left */
    bottom: 10px;                /* Move 10px from bottom */
    transform: translateX(-50%); /* Move button Center position  */
}

No2 - 使用父div，将宽度100％应用于父div并从按钮中移除绝对位置。

.parentDiv {
    width: 100%;            /* for full width */
    text-align: center;     /* for child element center */
 }

.buy-btn{
    display: inline-block;       /* Display inline block */
    text-align: center;          /* For button text center */
}

No3 - 使用保证金，将宽度100％应用于父div并从按钮中移除绝对位置。

.parentDiv {
    width: 100%;            /* for full width */
 }

.buy-btn{
    display: inline-block;       /* Display inline block */
    text-align: center;          /* For button text center */        
    margin: 0 auto;              /* For button center */
}

Answer 6

如果你想使用位置，在这种情况下你需要给btn宽度，然后它可以工作

.buy-btn {
    text-align: center;
    position: absolute;
    width:100px;
    left:50%;
    margin-left:-50px; /* please change it according to the width; always  the half of width */
    bottom: 10px;
}

Answer 7

检查这个答案，我认为这会对你有所帮助。 https://codepen.io/anon/pen/ZoYvME

.buy-btn {
    /* ... */
    position:absolute;
    margin-left:50%;
    margin-right:50%;
    transform: translateX(-50%);
    bottom: 10px;
  
}

<input type="button" class="buy-btn" value="hai">

中心绝对定位div

7 个答案: