CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Tobias Glaus
Tobias Glaus

Reputation: 3628

jQuery horizontal aligned div is not centered

I got a div with width:50% and a text
With jQuery I determine both widths.

Then I tried to horizontal align the text within the div with this jQuery:

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

As you can see I did it like with margin-left: calc(mydiv - mytext) in CSS. But the problem is, that the text is not centered. Here's a 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>

Whats did I do wrong?

Upvotes: 1

Views: 83

Answers (6)

Jones Joseph
Jones Joseph

Reputation: 4938

width() gives you the width excluding the padding. So you gotta modify your calculation to account for padding too like this:

and also the center aligning formula would be different

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

Upvotes: 0

Saiel Divkar
Saiel Divkar

Reputation: 81

Have edited your script a bit, And your text has padding so to calculate the width of the text including the padding you should use innerWidth() function. Hope this helps :) 

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

Upvotes: 2

caramba
caramba

Reputation: 22490

Why not a CSS only solution!?

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

Upvotes: 2

Marek Cieślar
Marek Cieślar

Reputation: 26

I think you should do something like that:

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

and remember about paddings! var padding = 60;

Upvotes: 1

Arkej
Arkej

Reputation: 2241

Change your calculation as below:

var horAlign = wrapperWidth / 2 - textWidth / 2;

What's more, delete padding, because it affects the aligning

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>

Upvotes: 1

Amir H. Bagheri
Amir H. Bagheri

Reputation: 1416

What you missd here is that you need ro divide textWidth by 2:

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

Upvotes: 1

Related Questions