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 */
}

Demo和没有 Css的演示

尝试不使用脚本，

CSS

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

CSS 演示

于 2013-10-23T09:58:14.077 回答
1

而不是使用 jquery 来居中 div 使用 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 
.className{
    margin:0 auto;
    width:200px;
    height:200px;
}

To center a div only horizontally, you need to specify a width, and an auto value for the left and right margins (you do remember the shorthand declarations in CSS don’t you?). This method works on block level elements (divs, paragraphs, h1, etc). To apply it to inline elements (like hyperlinks and images), you need to apply one additional rule – display:block.

Horizontal and vertical centering with CSS

Center a div both horizontally and vertically with CSS is a bit more tricky. You need to know the dimensions of the div beforehand.

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

如果您知道徽标的宽度和高度：

#responsiveLogo{
    position:absolute;
    left:50%;
    top:50%;
    margin-top:-(LOGO_HEIGHT/2)px;
    margin-left:-(LOGO_WIDTH/2)px;
}

其中 ( LOGO_HEIGHT/2) 是徽标高度的一半...

演示。

如果徽标的宽度和高度是动态的：

var element = document.getElementById('responsiveLogo');
element.style.marginLeft = -(element.offsetWidth/2)+'px';
element.style.marginTop = -(element.offsetHeight/2)+'px';
于 2013-10-23T09:59:26.150 回答
0

尝试使用css解决此类问题。对于居中，始终使用：margin:0px auto;

看看这个。

于 2013-10-23T09:59:55.167 回答
0 
#theLogo{
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -(yourHeight / 2);
  margin-left: -(yourWidth / 2);
}
于 2013-10-23T10:10:23.037 回答
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

无需使用 Javascript 将其居中，普通的旧 CSS 就可以了。

#theLogo{
margin-left: auto;
margin-right: auto;
width: 500px;
text-align: center;
}
于 2013-10-23T09:57:41.320 回答
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

与其他脚本存在冲突（我猜是 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 回答
-3

简单地使用...有什么问题？

#responsiveLogo {
    text-align: center;
}
于 2013-10-23T09:57:16.580 回答