How do I vertically center a button within a well in bootstrap?

Question

The button is slightly off-center vertically. How to center it?

<body>
<br><br>
<div class="well">well <button type="button" class="btn btn-primary" style="float:right;">Visit Page</button></div>

I don't have time to make a custom example at the moment, but [take a look here](http://jsfiddle.net/turbopipp/n62s5pjb/). It might help you along the way while you wait for an answer. :) — turbopipp, Oct 27 '15 at 16:55
Possible duplicate of [CSS Vertical align does not work with float](http://stackoverflow.com/questions/11718134/css-vertical-align-does-not-work-with-float) — Luizgrs, Oct 27 '15 at 18:25

score 2 · Accepted Answer · answered Oct 27 '15 at 18:06

You could also use Bootstraps Media Object component for this. See example Snippet.

body {
  padding-top: 50px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="well">
    <div class="media">
      <div class="media-body">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College.</div>
      <div class="media-right media-middle">
        <button type="button" class="btn btn-primary">Visit Page</button>
      </div>
    </div>
  </div>
</div>

score 1 · Answer 2 · answered Oct 27 '15 at 17:21

One way is to use this solution:

HTML:

<div class="container">
  <div class="well">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea fuga corporis accusantium, molestiae aspernatur. Cumque accusamus porro modi sequi voluptatem architecto voluptatum saepe, quaerat quisquam. Animi eligendi dicta mollitia cupiditate! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae architecto harum quidem dignissimos fugit iste culpa debitis ab suscipit dolores! Odio, at vitae, eius ullam fugit sed laborum facere sequi?
    <button type="button" class="btn btn-primary" style="float:right;">Visit Page</button>
  </div>
</div>

CSS:

body {
    margin: 100px 0;
}
.well {
    position: relative;
    padding-right: 120px;
}
button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 15px;
}

How do I vertically center a button within a well in bootstrap?

2 Answers2

UPDATED JSFIDDLE