Question

我正在尝试将按钮垂直对齐到中间，因此它更适合文本。我试过没有运气的中心区和文本中心。我想要一个通用的解决方案，所以我不会硬编码边距，填充和类似。

这是我的小提琴：http://jsfiddle.net/jhqjumgL/5/ 我的代码：

<h3>FMUs
  <button type="button" class="btn btn-default btn-xs">
    <span class="glyphicon glyphicon-plus"></span>
  </button>
</h3>

Answer 1

您可以使用Flexbox

h3 {
  display: flex;
  align-items: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<h3>FMUs
  <button type="button" class="btn btn-default btn-xs">
    <span class="glyphicon glyphicon-plus"></span>
  </button>
</h3>

Answer 2

你可以包装＆＃34; FMU＆＃34;元素中的文本以及echo $array[0]['Company'];：

＆＃13;

vertical-align

＆＃13;

h3 > span {
  vertical-align: middle;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <h3><span>FMUs</span> <button type="button" class="btn btn-default btn-xs"> <span class="glyphicon glyphicon-plus"></span> </button> </h3>属性是相对于兄弟姐妹而不是容器。

Answer 3

可能感兴趣的是将区域进一步划分，以便您有更多的控制权：

button,
textarea {
  vertical-align: middle;
}
.container {
  display: inline-block;
  height: 100px;
}
.text, .button {
  vertical-align: middle;
}

风格：

// Extract the values of the array and re-use as indexed array
$array = array_values($array);
echo $array[0]['Company'];

这允许更好地控制元素，这意味着您可以指定更好的位置。

你要尝试的小提琴就在这里：

fiddle

Answer 4

您可以将margin-bottom css-property添加到button元素，例如margin-bottom: 5px; http://jsfiddle.net/jhqjumgL/26/

文字

4 个答案: