centering a div with dynamic width using javascript/jquery?

Question

I have a div with absolute position which has a dynamic width width:auto; in the css style.

the content of this div is dynamic texts... which means whatever I type into an input field, it will be displayed inside this div.

when the div is empty or has only a 2-3 letters inside it, it is centered... but when there are more letters or words inside the div, the width of the div expands to show the contents and this will make the div to not to be centered anymore..

I did try text-align:center; in the CSS style and this did not work. I also tried margin: 0 auto; .

Is there any way using javascript or jquery to calculate the content of the div and center it accordingly?

OR

is there anyway, to expand the Div both right and left ways so the middle of the Div is always centered? as currently the Div expands from the right side only as there are more letters in it!

Here is my CSS for this dynamic div:

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

Thank you in advance.

Answer 1

Check this 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

try with a negative 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);

}

Example on codepen: http://codepen.io/anon/pen/isDHa/

Answer 3

With positioning absolute/fixed you need to apply some fixed width, width auto won't work.

To be tricky, you could use 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

Hi You might be looking for this

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 needs to be modified as per your requirement whether on window load etc