2

このガイドを参照して、テキストを div 内で垂直方向に中央揃えするという問題を解決しました。そして、私はそれが言っていることを理解していると信じていますが、それでもうまくいきません.

.number {
    position: relative;
    height:50px;
    margin: -25px 0 0 0;
    top: 50%;
    background-color: #00ff00;
}

問題を再現するfiddleを次に示します。緑色の領域 (.number) をボタン (.numberElement) 内で垂直方向に中央揃えにしたい

私の問題はどこですか？jQuery Mobile は物事を複雑にし、私が予測していない構造を作成していると思います...

ありがとうございました！

サンドロ

4

3 に答える 3

1

次のように css にいくつかの変更を加える必要があります。

.numberElement {
    position: absolute;
    width:30%;
    height:200px;
    margin:0px;
    display:table;
}

.numberElement .ui-btn-inner {
    display:table-cell;
    vertical-align:middle;
}

Working Demo

于 2013-04-09T06:08:15.523 に答える
0

フィドルでわかるように、.number の一番上のプロパティが正常に機能していません。top から margin-top に変更してみてください。margin-top:60px; を中心に表示されます。

また、.number の行を削除することを忘れないでください

margin: -25px 0 0 0;
于 2013-04-09T06:04:51.360 に答える
0

ここに私が考える正しい答えがあります 

.numberElement {
    position: absolute;
    width:30%;
    height:200px;
    margin:0px;
}

.number {
    position: relative;
    height:50px;
    margin: 50px 0;
    line-height:50px;
    top: 50%;
    background-color: #00ff00;
}

#grid {
    position:absolute;
    padding:0px;
    margin:0px;
    border:solid 1px #ff0000;
    height:400px;
    width:400px;
}
于 2013-04-09T06:06:39.343 に答える