无法水平对齐h2和按钮

Question

我很不理解为什么这些东西无法对齐。这应该是很简单的。我知道我可以通过负边距来调整按钮，但那感觉有点hacky。我想知道是什么原因导致了这个问题。

HTML：

<h2>A simple thing<br/>made difficult!</h2> 
<button>BTN</button>

CSS：

h2 {
    font-size: 29px;
    font-weight: lighter;
    display: inline-block;
    font-family:'Open Sans', sans-serif;
    margin:0;
    margin-right: 42px;
}
button {
    margin:0;
    font-size: 35px;
    padding: 10px 40px;
    width: 200px;
    display: inline-block;
}

JS fiddle here: http://jsfiddle.net/15xn79by/

- MP_Webby

---

可能是为什么这个 inline-block 元素会往下推？的重复问题。 - user1577303

Answer 1

只需使用 vertical-align:top; 为按钮即可。

h2 {
    font-size: 29px;
    font-weight: lighter;
    display: inline-block;
    font-family:'Open Sans', sans-serif;
    margin:0;
    margin-right: 42px;
}
button {
    margin:0;
    font-size: 35px;
    padding: 10px 40px;
    width: 200px;
    display: inline-block;
    vertical-align:top;
}

<h2>A simple thing<br/>made difficult!</h2> 
<button>BTN</button>

- Nabi

---

好的解决方案，谢谢。但是为什么这个有效呢？我一直认为 vertical-align 是用于元素设置了 table-cell 的情况下的。我为什么需要它呢？我可以很好地将两个按钮并排对齐，也可以将两个h2标签并排对齐。太奇怪了。 - MP_Webby

Answer 2

h2 {
font-size: 29px;
font-weight: lighter;
display: inline-block;
font-family:'Open Sans', sans-serif;
margin:0;
}
button {
margin-left:10;
font-size: 35px;
padding: 10px 40px;
width: 200px;
display: inline-block;
float:right;
}
<h2>A simple thing<button>BTN</button><br/>made difficult!</h2> 

- user4257136