Question

我有一个网站，我在网站上有div，它垂直和水平居中。它的当前内容是 25 ，因此居中工作是水平的。如果我更改内容，则必须将width编辑为宽度，将margin-left编辑为宽度的一半。每次进入网站时内容都会发生变化，这不起作用，我需要一个解决方案。

我该如何解决？我可以检测文本的宽度并设置width＆amp;使用js或jQuery margin-left？

#output {
    position: absolute;

    top: 50%;
    margin-top: -160px;

    color: #6FA673;
    font: 200pt Aleo;
    font-weight: bold;
    left: 50%;

    width: 296px;
    margin-left: -148px;
}

谢谢！

修改这是给你们的JSFiddle！与数字25完美配合，但其他任何东西都会有点偏离 - 垂直。

JSFiddle!

Answer 1

你说......

如果我更改内容，我必须将宽度编辑为宽度和宽度边距 - 左边宽度的一半。

......不，你不必这样做。你只需要一个更好的CSS解决方案。另一种方法是无论文本内容有多长或多短，都可以简单地将内容集中在一起。那么您就不必担心编写js代码来检测它的css属性......

CSS：

   #output {
        position: relative;
        top: 50%;
        margin:0 auto;

        text-align:center;
        color: #6FA673;
        font: 200pt Arial;
        font-weight: bold;
    }

我的fiddle

<强>更新您可以使用简单的jquery方法在页面加载时垂直对齐元素...

JS：

var mtop = $(window).height()/2;
$('#output').css({top: mtop});

Answer 2

我刚刚看到你的jsfiddle，同时我用HTML / CSS制作了一些东西，试图找出你想要的东西（对我来说，模仿灯箱:)）

http://codepen.io/anon/pen/dgKls

来自你的jsfiddle 这个？ http://jsfiddle.net/b4TTK/13/

#output, html, body {

    height:100%;

    width:100%;

    margin:0;

    display:table;

}

body {

    display:table-cell;

    vertical-align:middle;

    text-align:center;

}

#output {

    position: absolute;

    color: #6FA673;

    font: 200pt Arial;

    font-weight: bold;

    line-height:0

}

虽然不那么流畅

Answer 3

如果您唯一担心的是左边距需要是定制器宽度的1/2，您可以使用以下内容：

$('#output').css('marginLeft', '-'+$('#output').width() /2+'px');

当然

width: auto;

定位为绝对时，在DIV中改变内容时居中DIV

3 个答案: