CSS：在按钮的跨度中垂直对齐 p ......或者不是？答案

【问题标题】：CSS: Vertical align p in span in button...or not?CSS：在按钮的跨度中垂直对齐 p ......或者不是？
【发布时间】：2013-02-04 06:43:09
【问题描述】：

所以我有这个代码：

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

container 类是某种叠加层，这就是为什么我把.content 留在里面以表明我的意思。

实际上问题可能出在position: absolute，但我不知道没有它就可以执行该任务，因为我需要涵盖 IE8+、（移动）Safari、Firefox 和 Chrome。

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

请帮帮我！

【问题讨论】：

你的意思是这样吗？ see
@anonymousxxx 基本上是的，但是只要有两行，第二行就没有“填充”——按钮边缘和p 之间没有空格。似乎只有第一行居中，第二行在下方流动。
该标记无效：spans 不能包含段落。我很震惊你的选择器完全起作用了。
@Sven : 试试这个jsfiddle.net/nLN4W/5 你需要这个吗...？
@cimmanon 感谢您的提醒，您是对的！将它换成另一个跨度应该没什么大不了的——尽管这并不能让它更漂亮。

标签： html css button responsive-design vertical-alignment

【解决方案1】：

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

试试这个小提琴：http://jsfiddle.net/nLN4W/5/

【讨论】：