logo标签列表

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

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

Live版本可以在http://septemberstudio.co.uk/上查看。

2
  1. 对我来说它是居中的。
  2. 因为#responsiveLogo的宽度是100%？
 - h2ooooooo
@h2ooooooo 它垂直居中了吗？ - Reinstate Monica Cellio
@Archer 啊不是的 - 当然，这就是 OP 正在尝试做的事情。 - h2ooooooo
我在你的“实时版本”中找不到你的脚本……你确定你放进去了吗？ - Oliboy50
@Oliboy50，抱歉，现在可以了。 - user2898276
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演示

1

不要使用jQuery来居中一个div，而是使用CSS。

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

要只在水平方向上使一个 div 居中，你需要指定一个宽度，并为左右 margin 指定 auto 值（你还记得 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;
}
0

最好的方法可能是使用CSS，我还没有测试下面的代码，但应该可以正常工作。

<style>
.mydiv{
    width: 500px;
    height: 250px;
    margin: auto;
    border: 1px solid #333;
}
</style>
<div class="mydiv"> content </div>
0
没有必要使用JavaScript来居中，纯粹的CSS就可以很好地实现。
#theLogo{
margin-left: auto;
margin-right: auto;
width: 500px;
text-align: center;
}
0
如果您知道徽标的宽度和高度：
#responsiveLogo{
    position:absolute;
    left:50%;
    top:50%;
    margin-top:-(LOGO_HEIGHT/2)px;
    margin-left:-(LOGO_WIDTH/2)px;
}

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

演示。

如果Logo的宽度和高度是动态的：

var element = document.getElementById('responsiveLogo');
element.style.marginLeft = -(element.offsetWidth/2)+'px';
element.style.marginTop = -(element.offsetHeight/2)+'px';
标志是响应式的，因此宽度和高度会发生变化。这是否使您的建议不合适？ - user2898276
不，这只意味着您使用JavaScript相应地调整了margin-left和margin-top。 - louisbros
为“响应式”徽标大小添加了JS支持。您可以将其放入您的“resize”函数中。 - louisbros
0
<div id="theLogo" style="width:100%">
   <div id="responsiveLogo" class="logo" style="margin-left: auto; margin-right:auto;">September</div>
</div>
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());调试标志的宽度。

尝试了你的编辑，但没有起作用。我还尝试将其移动到自己的页面中，但也没有起作用。 - user2898276
0
#theLogo{
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -(yourHeight / 2);
  margin-left: -(yourWidth / 2);
}
0

尝试使用CSS解决这种问题。对于居中，始终使用：margin:0px auto;

看看这个

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接