Question

我正在寻找最有效的自举解决方案来对齐垂直居中于h3标签旁边的按钮

    button{
padding: 10px 18px;
}

<head>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
</head>

<body>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">Alerts</h3>
      <button>Add Alert</button>
    </div
  </div
</body

我希望它看起来像这样

Answer 1

假设您可以更改DOM结构，可以将按钮放在h3标签内吗？

<h3 class="panel-title">Alerts <button  class="btn btn-danger">Add Alert</button></h3>

此外，添加边距以添加与文本的分离

button{
    margin: 0px 10px;
}

Answer 2

知道h3是一个块元素，试着把它放......

   h3 {
      display:inline-block;
}

如何将按钮对齐到h3标签的右侧并使它们垂直对齐？

2 个答案: