CSS、HTML、divにテキストを関係なくdivの中央に残す

Question

divタグ内のウェブページの中央にテキストがありますが、実際には中間にはありませんが、中間に必要ですデフォルトではクリックすると、中央のテキストが変更されるボタンがあります。問題は、テキストを変更したときに、それがもう中央にないことです。私が欲しいのは、テキストはテキストの内容にかかわらず常に中央にあるべきです。あなたはtext-align: centerプロパティを使用する必要が

$("#myButton").on('click', function() { 
 
    $('#throbber_status_info').html('TEXXXXXXXXXXXXXT'); 
 
});

#throbber_status_info { 
 
    position: absolute; 
 
    color: black; 
 
    top: 53%; 
 
    left: 50%; 
 
    margin: 0px auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="myButton"> 
 
    click me 
 
</button> 
 
<div id="throbber_status_info" style="">Text</div>

Answer 1

をdiv絶対位置が、あなたがそのように必要がある場合は、この方法を試してください。

#throbber_status_info { 
    color: black; 
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
    background-color: #dadada; 
    margin: 0px auto; 
    top: 53%; 
    text-align: center; 
} 

をここで参照するにはFiddleですそれは行動している。

Answer 2

、それは自動的に更新スニペットを参照してくださいあなたのためにそれを行うだろう：あなたが使用することができます

$("#myButton").on('click', function() { 
 
    $('#throbber_status_info').html('TEXXXXXXXXXXXXXT'); 
 
});

#throbber_status_info { 
 
    position:absolute; 
 
    color:black; 
 
    top:53%; 
 
    width: 100%; 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="myButton"> 
 
    click me 
 
</button> 
 
<div id="throbber_status_info" style="">Text</div>

Answer 3

をdisplay:flex;

https://jsfiddle.net/wnqd85qr/1/

フレックスボックスを使用すると、水平と垂直の水平を簡単に調整できます。しかし、あなたはあなたのCSSコードの高さやそれが動作しないことが必要です。ここで

あなたはフレキシボックスの詳細を学ぶことができます：私は持っていないことを好む http://flexboxfroggy.com/

Answer 4

あなたはjQueryのを使用して動的にleftプロパティを変更したい場合は、コーディングすることができます。もちろん

$("#myButton").on('click', function() { 
    $('#throbber_status_info').html('TEXXXXXXXXXXXXXT').css('left', function() { 
    var tw = $(this).width(); 
    var w = $(this.parentNode).width(); 
    return (50 - (tw/2/w * 100)) + '%'; 
    }); 
}); 

を、これはあなたが持っている唯一の選択肢ではないと、このアプローチはleft財産すなわち、応答しませんサイズ変更イベントで更新する必要があります。 jQueryのを使用

https://jsfiddle.net/Lommba8s/

Answer 5

テキストを中央揃えする関数を作成することができます。

$("#myButton").on('click',function(){ 
    $('#throbber_status_info').html('TEXXXXXXXXXXXXXT'); 
    centerMe('#throbber_status_info'); 

}); 
function centerMe(JQ_Selector){ 
    var medItemWidth = $(JQ_Selector).width()/2; 
    var medWindWidth = $(window).width()/2; 
    $(JQ_Selector).css('left', (medWindWidth - medItemWidth) + 'px'); 
} 

JSFiddleを参照してください。 https://jsfiddle.net/99s400nw