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)。 但问题是，文本不是居中的。 这是一个小提琴：

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的解决方案？？

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

编辑了你的脚本，并且你的文本有填充，所以计算文本的宽度，包括你应该使用innerWidth（）函数的填充。 希望这有帮助:)

＆＃13;

＆＃13;

var r = (function () {
  var wrapperWidth = $("#wrapper").width() / 2;
  var textWidth = $("#text").innerWidth() / 2;
  var horAlign = wrapperWidth - 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);

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

你在这里想念的是你需要将textWidth除以2：

var horAlign = wrapperWidth/2 - textWidth/2; // please change your code to this.

Answer 4

更改您的计算如下：

var horAlign = wrapperWidth / 2 - textWidth / 2;

更重要的是，删除padding，因为它会影响对齐

var r = (function () {
  var wrapperWidth = $("#wrapper").width();
  var textWidth = $("#text").width();
  var horAlign = wrapperWidth / 2 - textWidth / 2;
  $("#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 5

我认为你应该做那样的事情：

var wrapperWidth = $("#wrapper").width();
var textWidth = $("#text").width();
var paddings = 60;
var horAlign = (wrapperWidth - textWidth - paddings)/ 2 ;

并记住填充物！ var padding = 60;

Answer 6

width()为您提供不包括填充的宽度。所以你必须修改你的计算以考虑填充，如下所示：

并且中心对齐公式也不同

＆＃13;

＆＃13;

var r = (function() {
  var wrapperWidth = $("#wrapper").width();
  var textWidth = $("#text").width() + parseInt($('#text').css('padding-left')) + parseInt($('#text').css('padding-right'));

  var horAlign = (wrapperWidth / 2) - (textWidth / 2);

  $("#text").css("margin-left", horAlign);

  var textHeight = $("#text").height();
  var vertAlign = textHeight / 2
  $("#text").css("margin-top", -vertAlign);
});

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;