-2

top-center ではなく、ページの中央に div を配置する方法を知っている人はいますか。白い背景が必要です。この点で私を助けてください。せずにこれを達成するのを手伝ってください

私のdivは

<div data-role="fieldcontain" >
ユーザー名:
<div id="b" style="display: inline-block">
<label for="password"><font size="1" color="black">Password : </font></label>
<input type="password" name="password" id="pwd" data-mini="true" value="" style="width: 45%;float: right"/></div>

4

3 に答える 3

0

これがまさにあなたが探しているものかどうかはわかりませんが、他に何もないと仮定して、これがページの中央に要素を配置する方法です。

<div id='b'>
some element
</div>

<style>
#b{
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin: auto;
width: 100px;
height: 10px;
}
</style>
于 2013-02-01T08:04:24.360 に答える
0

YourDivClass center にある div であると仮定します。

.YourDivClass
{
    position: fixed;
    left: 50%;
    top: 50%;
    background-color: white;
    z-index: 100;

    height: 400px;
    margin-top: -200px;

    width: 600px;
    margin-left: -300px;
}
于 2013-02-01T08:08:45.140 に答える
0

jQuery Mobile 独自の機能のため、純粋な CSS を使用してコンテンツを完全にセンタリングすることはできません。

jQM専用に作成された実際の例を次に示します: http://jsfiddle.net/Gajotres/detPg/

$(document).on('pageshow', '#index', function(){   
    $("div[data-role='fieldcontain']").css('margin-top',getRealContentHeight()/2 - $('#b').height()/2);
    $('#b').css('margin-left',$("div[data-role='content']").outerWidth()/2 - $('#b').width()/2);
});

function getRealContentHeight() {
    var header = $("div[data-role='header']:visible");
    var footer = $("div[data-role='footer']:visible");
    var content = $("div[data-role='content']:visible:visible");
    var viewport_height = $(window).height();

    var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
    if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
        content_height -= (content.outerHeight() - content.height());
    } 
    return content_height;
}

通常、水平方向のセンタリングは css でのみ実現できますが、新しい jQM 1.3 の変更により、javascript を介して計算する必要があります。

于 2013-02-01T09:34:40.560 に答える