CSS，HTML，使div文本保留在其div的中间，无论文本如何

Question

我在网页中间有一个文本，里面有一个div标签，实际上它还没有在中间，但默认情况下我需要它在中间。那里有一个按钮，当您单击时，中间的文本会发生变化。问题是，当我更改文本时，它不再居中。我想要的是，无论文本内容如何，文本都应该始终处于中心位置。

$("#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

您需要

使用 text-align: center 属性，它会自动为您执行此操作，请参阅更新的代码段：

$("#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 2

您可以使用display:flex;

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

使用弹性框，您可以轻松地将垂直居中 en 水平。但是你需要在你的CSS代码中有一个高度，否则它不起作用。

在这里，您可以了解有关弹性框的更多信息：http://flexboxfroggy.com/

Answer 3

如果要使用 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属性。

https://jsfiddle.net/Lommba8s/

Answer 4

使用 Jquery 可以创建一个函数来居中文本。

$("#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

Answer 5

我宁愿不要绝对定位div，但如果您需要这样做，请尝试以下操作：

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

这里有一个小提琴来观察它的实际效果。