0

所以我有这个代码：

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;
}

小提琴

我整天都在尝试让.<p>里面的垂直居中span，但没有成功。问题是这个按钮必须是响应式的：如果文本不适合一行，它必须流入第二行。如您所见，这很有效，但看起来不太好，因为文本位于按钮顶部，而不是很好地居中。

该课程container旨在成为某种叠加层，这就是为什么我离开.content那里以表明我的意思。

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

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

请帮我！

4

1 回答 1

1

更改Height : 100%为line-height:60px;onCSS .container {}将开始工作...

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

于 2013-02-19T15:07:24.507 回答