CSS：垂直對齊按鈕範圍中的p ...還是不是？

Question

所以我有這樣的代碼：

HTML

<button type="submit" id="button" name="send-message"> 
    <span class="content">Lorem ipsum</span> 
    <span class="container"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p</span> 
</button> 

CSS

button { 
    width: 100%; 
    padding: 0; 
    border: 0; 
    background-color: green; 
    position: relative; 
} 

.content { 
    display: inline-block; 
    padding: 1em; 
} 

.container { 
    width: 100%; 
    height: 100%; 
    background-color: blue; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

.container p { 
    background: yellow; 
    vertical-align: middle; 
} 

Fiddle

我試了一整天得到<p>垂直居中的內，沒有成功。問題是這個按鈕必須有響應：如果文本不適合一行，它必須流入第二個。這種方式正如你所看到的那樣，但它看起來不太好，因爲文本位於按鈕的頂部，而不是很好地居中。

類container是爲了某種覆蓋，這就是爲什麼我留在.content在那裏，以顯示我的意思。

其實問題可能是position: absolute，但我不知道如果沒有它，我不需要執行那項任務，因爲我需要覆蓋IE8 +，（移動）Safari，Firefox和Chrome。

如果這個問題有一個更簡單的解決方案，我很想聽聽它，因爲我不是用於這種效果的標記的粉絲。

請幫幫我！

Answer 1

上CSS .container {}更改Height : 100%到line-height:60px;會得到工作...

試試這個小提琴：http://jsfiddle.net/nLN4W/5/