0

html に問題があります。この基本的な HTML ログイン ページがあります。

<section>
    <form id="" name="" method="post" action="">
        <label for="username">User:</label>
        <input type="text" id="username" name="username" />
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" />
        <input type="submit" id="login" name="login" value="Entrar" />
    </form>
</section>

問題は、このセクションをページ内で水平方向と垂直方向にどのように中央集権化するかということです。幅は固定ですが、高さはコンテンツに依存しません。

CSS の例:

section { width: 300px; }

CSSだけで無理ならjQueryでもOK。

4

4 に答える 4

4

jQueryを使用すると、これを行うことができます

  1. ウィンドウの高さを取得する
  2. 中央に配置する要素の高さを引きsectionます。
  3. その値を半分に分割します。
  4. 要素のマージントップsectionをその最終番号にします。

このような：

var ht = $(window).height();
var sectionHt = $('section').height();
var pad = (ht - sectionHt)/2;

$('section').css('margin-top',pad);

例として: http://jsfiddle.net/JMC_Creative/8RpQZ/

または、ウィンドウのサイズが変更されたときにウィンドウを中央に配置したい場合は、同じことを行いますが、$(window).resize()jQuery メソッドでラップします。このような：

$(window).resize(function(){
    var ht = $(window).height();
    var sectionHt = $('section').height();
    var pad = (ht - sectionHt)/2;

    $('section').css('margin-top',pad);
});
于 2013-10-11T01:35:07.770 に答える
1 
<section>
    <form id="" name="" method="post" action="">
        <label for="username">User:</label>
        <input type="text" id="username" name="username" />
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" />
        <input type="submit" id="login" name="login" value="Entrar" />
    </form>
</section>

section {
    width: 300px;
    height: auto;
    margin: 0 auto;
    position: relative;
    top: 250px; /* pixels from top of page - if you have the height to be auto, may see different changes, however, this could be what you want if you want the form to be in the exact center -- simply change the px's to suit your needs */
}

これはあなたが求めているものですか？デモ: http://jsfiddle.net/zyFG5/

編集：

わかりました、これを試してみてください：

<section>
    <form id="" name="" method="post" action="">
        <label for="username">User:</label>
        <input type="text" id="username" name="username" />
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" />
        <input type="submit" id="login" name="login" value="Entrar" />
    </form>
</section>

section {
   width: 300px;
   height: 300px;
   position: absolute;
   left: 50%;
   top: 50%; 
   margin-left: -150px;
   margin-top: -150px;
}

負のマージンは、高さと幅のちょうど半分であり、要素を完全な中央に引き戻します。固定の高さ/幅の要素でのみ機能します。

デモ: http://jsfiddle.net/DDZmY/

于 2013-10-11T01:28:38.310 に答える
0

jquery の使用:

$(function(){
    var height = $(window).height();
    var width = $(window).width();

    var blockHeight = $(".block").height();
    var blockWidth = $(".block").width();

    var paddingTop = (height/2 - blockHeight);
    var paddingWidth = (width/2 - blockWidth);

    $(".block").css({
        'padding-top':paddingTop,
        'padding-left':paddingWidth
     });
});

http://jsfiddle.net/zyFG5/2/

于 2013-10-11T01:44:16.070 に答える
0

少しの CSS は、目的を達成するのに役立ちます。ただし、必要なものを正確に取得するには、微調整が必​​要になる場合があります。

セクションを相対位置に設定して、垂直方向に整列できるようにします。次に、自動左右マージンを設定して、水平方向の中央に配置します...

section{position:relative;top:200px;
  margin:auto;
  width:300px;
  border:2px outset #0af;
  text-align:right;
  background-color:#fff;
  padding:6px;
}

別の方法は少しハックですが、うまくいくようです。高さ 100% の div を作成し (これは非表示になります)、セクションをこれに垂直に揃えます。

ここにフォークできるものがあります... http://codepen.io/lukeocom/pen/Dmdnh

于 2013-10-11T01:35:36.713 に答える