Question

按钮略微偏离垂直中心。如何居中？

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

Answer 1

您也可以使用Bootstraps Media Object组件。请参阅示例代码段。

＆＃13;

body {
  padding-top: 50px;
}

＆＃13;

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

＆＃13;

Answer 2

一种方法是使用此解决方案：

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;
}

如何在引导程序中将按钮垂直居中？

2 个答案:

UPDATED JSFIDDLE