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、成功しませんでした。問題は、このボタンがレスポンシブである必要があることです。テキストが1行に収まらない場合は、2番目の行に流れ込む必要があります。これはご覧のとおり機能しますが、テキストが中央に配置されるのではなく、ボタンの上に表示されるため、見栄えがよくありません。

クラスcontainerはある種のオーバーレイを意図しているので、私が.content何を意味するのかを示すためにそこに残しました。

実際には問題がある可能性がありますがposition: absolute、IE8 +、（モバイル）Safari、Firefox、Chromeをカバーする必要があるため、それなしでそのタスクを実行することはできません。

この問題のより簡単な解決策がある場合、私はこの効果に使用されるマークアップのファンではないので、それについて聞いてみたいと思います。

私を助けてください！

4

1 に答える 1

1

オンに変更Height : 100%すると動作します...line-height:60px;CSS .container {}

このフィドルを試してみてください：http：//jsfiddle.net/nLN4W/5/

于 2013-02-19T15:07:24.507 に答える