CODEWITHSUNDEEP
htmltwitter-bootstrapcss
user944513
user944513

Reputation: 12729

why is the button not vertically aligned?

I made a simple demo in which I have a div containing a button, but the button is not vertically aligned I used line-height as well as position absolute and top margin but it does not work. Why doesn't it work? Here is my code:

<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

Upvotes: 1

Views: 1741

Answers (3)

Rahul Kashyap
Rahul Kashyap

Reputation: 977

You are using CSS incorrectly style:'position:absolute;top:10px.

it should be.

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

or you can use this code this will also work fine.

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

here is codepan which I've edited click here

Upvotes: 0

ketan
ketan

Reputation: 19341

Use following css. Make button position absolute and div position relative.

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

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

Working Codepen

Note: If possible try to avoid inline css.

Upvotes: 1

Lars Jensen
Lars Jensen

Reputation: 67

Try position:relative instead of position:absolute.

Upvotes: 0

Related Questions