Question

我有一个绝对位置的div，在css样式中有一个动态宽度width:auto;。

这个div的内容是动态文本...这意味着无论我在输入字段中输入什么，它都会显示在这个div中。

当div为空或者里面只有2-3个字母时，它居中...但是当div内有更多的字母或单词时，div的宽度会扩展以显示内容，这将是让div不再居中..

我确实在CSS样式中尝试text-align:center;，但这不起作用。我也试过了margin: 0 auto;。

有没有办法使用javascript或jquery来计算div的内容并相应地居中？

OR

无论如何，要扩大Div左右两侧的方式，以便Div的中间始终居中？因为目前Div只是从右侧扩展，因为里面有更多的字母！

这是我对这个动态div的CSS：

#BOTtext{
    position: absolute;
    width: auto;
    height: 16px;
    left: 47%;
    top: 140px;
    z-index: 1000000000;
    background-color: #f7f7f7;
    margin: 0 auto;
}

提前谢谢。

Answer 1

选中此http://jsfiddle.net/AyBtT/

<强>的Javascript

$(function () {
    $("#txt").keyup(function () {
        $("#BOTtext").html($(this).val());
        adjust();
    });
    $(window).resize(adjust);
    adjust();
    function adjust() {
        $("#BOTtext").css("left", ($(window).width() - $("#BOTtext").width())/2);
    }
});

<强> HTML

<div id="BOTtext">Type in the text field</div>
<input id="txt"/>

Answer 2

尝试使用否定transform: translateX

#BOTtext{
    position: absolute;
    top: 140px;
    left: 50%;    
    height: 16px;
    z-index: 1000000000;
    background-color: #f7f7f7;

    -webkit-transform: translate3d(-50%, 0, 0);
    -moz-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);

}

关于codepen的示例：http://codepen.io/anon/pen/isDHa/

Answer 3

对于定位绝对/固定，您需要应用一些固定宽度，宽度自动赢得工作。

要棘手，你可以使用min-width：

#BOTtext{
    position: absolute;
    width: auto;
    min-width: 200px;
    height: 16px;
    left: 47%;
    top: 140px;
    z-index: 1000000000;
    background-color: #f7f7f7;
    margin: 0 auto;
}

Answer 4

您好，你可能正在寻找这个

HTML

<div class="wrapper">
<div id="bot">Hello Woroorerer </div>
</div>

CSS

.wrapper{
    position:relative;
    border:1px solid red;
    width:450px;
}

#bot{
    position:absolute;
    left:50%;
    border:1px solid green;
}

的jQuery

var botWidth = $('#bot').width();
var shift = botWidth/2
$('#bot').css("margin-left",-shift)

jsfiddle：http://jsfiddle.net/pu4A6/

js需要根据您的要求进行修改，无论是在窗口加载等

使用javascript / jquery将动态宽度的div居中？

4 个答案:

对于定位绝对/固定，您需要应用一些固定宽度，宽度自动赢得工作。