Question

我正试图水平和垂直居中徽标。到目前为止我有这个......

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

查看实时版本

Answer 1

试试这个，

<强> SCRIPT

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和Demo without Css

尝试不使用脚本，

<强> CSS

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

Css Demo

Answer 2

而不是使用jquery来居中div使用css ..

#responsiveLogo{
height:vale;
width:value;
position:absolute;
margin:0 auto;
left:0; right:0; top:0; bottom:0;
}

Answer 3

没有必要使用Javascript来集中这个，普通的旧CSS工作得很好。

#theLogo{
margin-left: auto;
margin-right: auto;
width: 500px;
text-align: center;
}

Answer 4

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

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

其中（LOGO_HEIGHT/2）是徽标高度的一半......

Demo.

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

var element = document.getElementById('responsiveLogo');
element.style.marginLeft = -(element.offsetWidth/2)+'px';
element.style.marginTop = -(element.offsetHeight/2)+'px';

Answer 5

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

look at this

Answer 6

<div id="theLogo" style="width:100%">
   <div id="responsiveLogo" class="logo" style="margin-left: auto; margin-right:auto;">September</div>
</div>

Answer 7

与其他脚本存在冲突（我猜是fittext.js）。

您可以尝试将您的脚本放在fittext脚本之后的<body>标记的末尾。这应该有用。

编辑：

事实上，冲突可能来自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());调整徽标的宽度

Answer 8

#theLogo{
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -(yourHeight / 2);
  margin-left: -(yourWidth / 2);
}

Answer 9

.className{
    margin:0 auto;
    width:200px;
    height:200px;
}

要仅水平居中div，您需要指定宽度，左右边距的自动值（您确实记得CSS中的缩写声明吗？）？此方法适用于块级元素（div，段落，h1等）。要将其应用于内联元素（如超链接和图像），您需要应用一个附加规则 - display：block。

使用CSS进行水平和垂直居中

使用CSS水平和垂直居中div有点棘手。您需要事先知道div的尺寸。

.className{
    width:300px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-100px 0 0 -150px;
}

Answer 10

最好的方法可能是使用CSS，我没有测试过波纹管，但它应该可以正常工作。

<style>
.mydiv{
    width: 500px;
    height: 250px;
    margin: auto;
    border: 1px solid #333;
}
</style>
<div class="mydiv"> content </div>

Answer 11

简单地使用......

出了什么问题

#responsiveLogo {
    text-align: center;
}

为什么div不是水平和垂直居中？

11 个答案: