Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以使用display:flex;

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

使用Flexbox，您可以轻松地将水平居中。但是你需要CSS代码中的高度或者它不起作用。

在这里，您可以了解有关flexbox的更多信息： 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)) + '%';
  });
});

当然，这不是您拥有的唯一选项，并且此方法无响应，即应在resize事件上更新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;
}

这是一个Fiddle，可以看到它的实际效果。

CSS，HTML，使div文本保留在div的中间，而不管文本

5 个答案: