Question

我做了一个简单的演示，其中我有一个 div 包含一个按钮，但按钮不是垂直对齐我使用 line-height 以及位置绝对和顶部保证金，但它不起作用。为什么它不起作用？这是我的代码：

<div ng-app='app'>
<div ng-controller='first as f'>

   <div class='col-xs-4 text-center' style='background-color:red;height:70px;line-height:70px'>

     <button type="button" class="btn btn-primary btn-lg btn-block" style:'position:absolute;top:10px'>Block level button</button>

   </div>

</div>
</div>

http://codepen.io/naveennsit/pen/KVawpW

Answer 1

使用以下css。使按钮位置绝对，div位置相对。

.btn-block {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

.col-xs-4 text-center{
  position:relative;
}

<强> Working Codepen

注意：如果可能，请尝试避免内联css。

Answer 2

尝试位置：相对而不是位置：绝对。

Answer 3

您错误地使用了CSS style:'position:absolute;top:10px。

应该是。

<button type="button" class="btn btn-primary btn-lg btn-block" style='position:absolute;top:10px'>Block level button</button>

或者您可以使用此代码，这也可以正常工作。

<button type="button" class="btn btn-primary btn-lg btn-block" style='margin-top:10px;'>Block level button</button>

这是我编辑的代码扩展click here

为什么按钮没有垂直对齐？

3 个答案: