javascript - jQuery 水平对齐的 div 不居中

Question

我得到了一个带有 width:50% 的 div 和一个文本
使用 jQuery 我确定了两个宽度。

然后我尝试使用这个 jQuery 水平对齐 div 中的文本:

var wrapperWidth = $("#wrapper").width();
var textWidth = $("#text").width();
var horAlign = wrapperWidth / 2 - textWidth;
$("#text").css("margin-left", horAlign);

如您所见，我在 CSS 中使用 margin-left: calc(mydiv - mytext) 来完成它。 但问题是，文本没有居中。 这是一个 fiddle :

var r = (function () {
  var wrapperWidth = $("#wrapper").width();
  var textWidth = $("#text").width();
  var horAlign = wrapperWidth / 2 - textWidth;
  $("#text").css("margin-left", horAlign);
  
  var textHeight = $("#text").height();
  var vertAlign = textHeight / 2
  $("#text").css("margin-top", - vertAlign);
});

$(document).ready(r);
$(window).resize(r);

#wrapper{
  width:50%;
  height:400px;
  border:solid 5px black;
  margin:auto;
  margin-top:50px;
}

#text{
  font-family: Helvetica, Arial, Sans-Serif;
  font-weight:bold;
  text-transform:uppercase;
  font-size:3.5em;
  padding-left:30px;
  padding-right:30px;
  background:white;
  display:inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
   <p id="text">Test</p>
</div>

我做错了什么？

Answer 1

为什么不是纯 CSS 解决方案!？

#wrapper{
  width:50%;
  height:400px;
  border:solid 5px black;
  margin:auto;
  margin-top:50px;
}

#text{
  font-family: Helvetica, Arial, Sans-Serif;
  font-weight:bold;
  text-transform:uppercase;
  font-size:3.5em;
  display: block;
  text-align: center;
}

#text span {
  position: relative;
  top: -35px;
  display: inline-block;
  padding-left:30px;
  padding-right:30px;
  background: white;
}

<div id="wrapper">
   <div id="text"><span>Test</span></div>
</div>