垂直对齐标题中的按钮

Question

我知道这应该相当简单，但我为我的生活找不到合适的CSS来做到这一点。

HTML

<h1>A Cool Header <button>Click Me</button></h1>

CSS

button{position:relative; top:50%;}

我的尝试可以在 Here

找到

感谢任何帮助。

Answer 1

为vertical-align: middle;

添加button

删除position:relative; top:50%;

h1 {background-color:green}

button{
    vertical-align: middle;
}

<h1>A Cool Header <button>Click Me</button></h1>

Answer 2

使用“ vertical-align：middle ”

button{  display: inline-block;
  vertical-align: middle;}

Answer 3

使用弹性盒

CommandRows2.ItemsSource = items; CommandRows2.Items.Refresh(); 看到它在我网站的标题上运行 http://kezzi.co