无法水平对齐 h2 和 Button

Question

我不明白为什么这些不对齐。这应该很简单。我知道我可以用负余量调整按钮，但这感觉有点老套。我想知道是什么导致了这个问题。

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 这里：http://jsfiddle.net/15xn79by/

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>

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>

无法水平对齐 h2 和 Button

Unable to horizontally align h2 and Button

html

css

alignment