如何将引导类按钮垂直居中？

Question

我需要在form-actions垂直方向内获得一个按钮:

这是如何显示:

因此绿色按钮显示在其div(蓝色区域)下方.我怎样才能让它居中.我使用一个style.css文件,我已经设置了其他一些div.

Answer 1

这就是你需要的!这是一个演示,如果您还有其他需要,请检查并告诉我.

http://jsfiddle.net/fkQBf/

<div style="height: 200px; border: solid 2px green; text-align:center;line-height:200px;">
    <input type="submit" Value="Ok" style="vertical-align: middle"></input>
</div>

更新的代码和小提琴:

我们不应该使用内联样式,因此下面是具有单独样式的更新小提琴

http://jsfiddle.net/fkQBf/1/

<div id="container">
    <input id="verticalButton" type="submit" Value="Ok"></input>
</div>

div#container
{
    height: 200px; 
    border: solid 2px green; text-align:center;
    line-height:200px;
}

input#verticalButton
{
     vertical-align: middle
}

希望这可以帮助!

Answer 2

由于我不想设置绝对高度，所以我使用了 flex 框。

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

.container {
  height:50%;
  border: 1px solid black;
  display:flex;
  align-items:center; /* vertically aligned! */
  justify-content: center;
}

.other {
  height:320px;
  border: 1px solid red;
}

<div class="other"><!-- Other content -->
Welcome to my great site!
  <div class="container"> <!-- the container you want that button -->
      <button class="btn btn-danger btn-lg">
      Hello World
      </button>
  </div>
</div>