3

ロゴを水平方向と垂直方向の中央に配置しようとしています。私はこれまでのところ...

<script type="text/javascript">
    $(document).ready(function(){
        $(window).resize(function(){
            $('#theLogo').css({
                position:'absolute',
                left: ($(window).width() - $('#theLogo').outerWidth())/2,
                top: ($(window).height() - $('#theLogo').outerHeight())/2
            });
        });
        $(window).resize();
    });
</script>

HTML

<div id="theLogo">
    <section id="responsiveLogo" class="logo">September</section>
</div>

私はこのビットを中心にしようとしています:

<section id="responsiveLogo" class="logo">September</section>

ライブ バージョンはhttp://septemberstudio.co.uk/でご覧いただけます。

4

11 に答える 11

1

これを試して、

脚本

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

CSS

#theLogo {
    width:50%;
    border:1px solid red;/* for testing */
}

デモとCss なしのデモ

スクリプトなしで試してみてください。

CSS

#theLogo{
    margin: 0 auto;
    position:absolute;
    left:0;
    right:0;
    width:100px;
}

CSS デモ

于 2013-10-23T09:58:14.077 に答える
1

div をセンタリングするために jquery を使用するのではなく、css を使用します。

#responsiveLogo{
height:vale;
width:value;
position:absolute;
margin:0 auto;
left:0; right:0; top:0; bottom:0;
}
于 2013-11-21T10:44:08.623 に答える
0

この種の問題にはcssを使用してみてください。センタリングには、常に次を使用します。margin:0px auto;

これを見てください。

于 2013-10-23T09:59:55.167 に答える
0 
<div id="theLogo" style="width:100%">
   <div id="responsiveLogo" class="logo" style="margin-left: auto; margin-right:auto;">September</div>
</div>
于 2013-10-23T10:00:58.170 に答える
0 
#theLogo{
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -(yourHeight / 2);
  margin-left: -(yourWidth / 2);
}
于 2013-10-23T10:10:23.037 に答える
0

これを中央に配置するために Javascript を使用する必要はありません。単純な古い CSS は問題なく機能します。

#theLogo{
margin-left: auto;
margin-right: auto;
width: 500px;
text-align: center;
}
于 2013-10-23T09:57:41.320 に答える
0

他のスクリプト (fittext.js だと思います) との競合があります。

<body>fittext スクリプトの後、タグの最後にスクリプトを配置してみてください。そして、これはうまくいくはずです。

編集 ：

実際、競合はletteringプラグインに起因する可能性があります。<head>そのため、スクリプトをタグの最後に置くことができます。

編集2：

このコードを使用してみてください:

$(document).ready(function(){
  $(window).resize(function(){
    $('#theLogo').css({
      position:'absolute',
      left: ($(window).width() - $('#theLogo').outerWidth())/2,
      top: ($(window).height() - $('#theLogo').outerHeight())/2
    });
  });
  setTimeout(function(){
    $(window).resize();
  }, 200);
});

それが機能する場合は、実際にスクリプトと競合しています。次を使用してロゴの幅をデバッグしてみてくださいconsole.log($('#theLogo').outerWidth());

于 2013-10-23T10:09:26.727 に答える
0

最良の方法はおそらく CSS を使用することです。ベローはテストしていませんが、正常に動作するはずです。

<style>
.mydiv{
    width: 500px;
    height: 250px;
    margin: auto;
    border: 1px solid #333;
}
</style>
<div class="mydiv"> content </div>
于 2014-08-21T13:05:10.663 に答える
0 
.className{
    margin:0 auto;
    width:200px;
    height:200px;
}

div を水平方向にのみ中央に配置するには、幅と、左右の余白に auto 値を指定する必要があります (CSS の短縮宣言を覚えていますよね?)。このメソッドは、ブロック レベルの要素 (div、段落、h1 など) で機能します。インライン要素 (ハイパーリンクや画像など) に適用するには、display:block という 1 つの追加ルールを適用する必要があります。

CSS による水平方向および垂直方向のセンタリング

CSS を使用して水平方向と垂直方向の両方で div を中央に配置するのは、もう少し注意が必要です。事前に div のサイズを知っておく必要があります。

.className{
    width:300px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-100px 0 0 -150px;
}
于 2013-12-17T08:55:04.243 に答える