html - 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>在 span 内垂直居中， 没有成功。问题是这个按钮必须是响应式的:如果文本不适合一行，它必须流入第二行。如您所见，它可以正常工作，但它看起来不太好，因为文本位于按钮顶部，而不是很好地居中。

类(class)container意味着某种覆盖，这就是我离开的原因 .content在那里表明我的意思。

实际上问题可能是 position: absolute ，但如果没有它，我不知道如何执行该任务，因为我需要涵盖 IE8+、(移动)Safari、Firefox 和 Chrome。

如果这个问题有更简单的解决方案，我很想听听，因为我不喜欢用于此效果的标记。

请帮帮我!

Answer 1

在 CSS .container {} 上将 Height : 100% 更改为 line-height:60px; 将起作用...

试试这个 fiddle :http://jsfiddle.net/nLN4W/5/