1

ページがロードされた直後に DIV を水平方向と垂直方向の両方で中央揃えにするにはどうすればよいですか?

現在、次のソリューションを使用しています。

HTML:

<div class="container">
  <div class="visitorSelect">
    <a href="/visitorLog/boeing">
      <div class="tile double icon bg-color-blue">
        <div class="tile-content">
          <i class="icon-plane"></i>
        </div>
        <div class="brand">
          <span class="name">Employee</span>
        </div>
      </div>
    </a>

    <a href="/visitorLog/guest">
      <div class="tile double icon bg-color-orange">
        <div class="tile-content">
          <i class="icon-group"></i>
        </div>
        <div class="brand">
          <span class="name">Guest</span>
        </div>
      </div>
    </a>
  </div> <!-- visitorSelect -->
</div> <!-- container -->

JavaScript:

<script>
$(document).ready(function()
{
  $(window).resize(function()
  {
    $('.visitorSelect').css(
    {
      position: 'absolute',
      left: ($(window).width() - $('.visitorSelect').outerWidth()) / 2,
      top: ($(window).height() - $('.visitorSelect').outerHeight()) / 2
    });
  });

  // call `resize` to center elements
  $(window).resize();
});
</script>

ページを最初にロードすると、DIVto center がページの右側に表示され、垂直方向の中央の少し下に表示されます。ただし、ページのサイズを手動で変更すると、正確に必要な場所にスナップされます。

ドキュメントの読み込み時に要素をセンタリングで適切に配置するには、どのような追加手順を実行する必要がありますか?

4

3 に答える 3

1

これがなんらかのモーダルか異常なものでない限り、CSS Margin Auto が機能する場合、スクリプトだけでこれを行うことはありません。ここにチュートリアルがあります http://demo.tutorialzine.com/2010/03/centering-div-vertically-and-horizo​​ntally/demo.html

CSS の例を次に示します。

div.container{
  width:100%;
  height:100%;
}
div.visitorSelect {
  width:200px;
  height:200px;
  margin:auto;
}
于 2013-04-08T21:40:36.867 に答える
1

幅を計算する前に、.visitor 要素を絶対配置に設定します。

デフォルトでは、静的 div は親の全幅に拡張されます。絶対divはしません。これは最初の計算を台無しにしています。

おそらく、CSS または ready() 関数のいずれかで、サイズ変更イベント関数の外で位置 css ルールを設定する必要があります。コードへの変更を最小限に抑えた修正を次に示します。

$(document).ready(function()
{
  $(window).resize(function()
  {
    $('.visitorSelect').css(
    {
      position: 'absolute'
    });

    $('.visitorSelect').css(
    {
      left: ($(window).width() - $('.visitorSelect').outerWidth()) / 2,
      top: ($(window).height() - $('.visitorSelect').outerHeight()) / 2
    });
  });

  // call `resize` to center elements
  $(window).resize();
});
于 2013-04-08T21:41:34.570 に答える
0

ページが読み込まれたら、 divを配置する必要があります。

<script>
$(document).ready(function()
{
  $('.visitorSelect').css(
    {
      position: 'absolute',
      left: ($(window).width() - $('.visitorSelect').outerWidth()) / 2,
      top: ($(window).height() - $('.visitorSelect').outerHeight()) / 2
    });

  $(window).resize(function()
  {
    $('.visitorSelect').css(
    {
      position: 'absolute',
      left: ($(window).width() - $('.visitorSelect').outerWidth()) / 2,
      top: ($(window).height() - $('.visitorSelect').outerHeight()) / 2
    });
  });

  // call `resize` to center elements
  $(window).resize();
});
</script>
于 2013-04-08T21:39:26.277 に答える