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

【问题标题】：How can I center vertically a bootstrap class button?如何垂直居中引导类按钮？
【发布时间】：2014-04-10 03:34:48
【问题描述】：

我需要在form-actions 中垂直获取一个按钮：

显示方式如下：

因此，绿色按钮将显示到其 div（蓝色区域）。我怎样才能使它居中。我使用了一个style.css 文件，我在其中设置了一些其他 div 的样式。

【问题讨论】：

【解决方案1】：

因为我不想设置绝对高度，所以我使用了弹性盒子。

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

【讨论】：

谢谢，这个答案很好

【解决方案2】：

这是你需要的！这是一个演示，如果您需要其他内容，请查看并告诉我。

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
}

希望这会有所帮助！

【讨论】：

你是不是打错字了，还是我应该写div#container 和input#verticalButton？
不是拼写错误，如果也只能使用#container。但是 div#container 选择器选择具有容器且类型为 div 的元素。
查看w3schools.com/css/css_id_class.asp 以获得更好的理解

【解决方案3】：

使用一些风格，比如

display:table-cell; //main div

vertical-align:center; // to button

如果这不起作用，请尝试

height:100%; // to button
vertical-align:center; // to button
line-height : 100%;  // to button

【讨论】：

我应该如何设置按钮的样式，.button 或 #button？
如果你为按钮定义类而不是使用.classname，或者你为按钮定义id而不是使用#idname，你可以使用其中任何一种。
只是为了确认任何属性被修改/附加到类或id，对吧？
第一个解决方案不起作用。第二种解决方案将按钮拉伸到整个高度。
垂直对齐：中心？那个不存在，它是vertical-align:middle