The horizontal alignment of a jQuery div is off-center

Question

The horizontal alignment of a jQuery div is off-center

There is a div element with a width: 50% and some text inside. Using jQuery, I am calculating the widths of both. Then, I attempted to horizontally center the text within the div using this jQuery code:

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

I basically tried to mimic

margin-left: calc(mydiv - mytext)

in CSS. However, the issue is that the text doesn't appear centered. You can view the problem on this 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>

What mistake have I made here?

javascript jquery html css

Answer 1

Answer №1

Why not consider a pure CSS solution?

#container{
  width:75%;
  height:300px;
  border:solid 3px black;
  margin:auto;
  margin-top:30px;
}

#content{
  font-family: Times New Roman, Times, Serif;
  font-weight:normal;
  text-transform:none;
  font-size:1.5em;
  display: block;
  text-align: center;
}

#content span {
  position: relative;
  top: -20px;
  display: inline-block;
  padding-left:10px;
  padding-right:10px;
  background: lightgrey;
}

<div id="container">
   <div id="content"><span>Example</span></div>
</div>

Answer 2

Why not consider a pure CSS solution?

#container{
  width:75%;
  height:300px;
  border:solid 3px black;
  margin:auto;
  margin-top:30px;
}

#content{
  font-family: Times New Roman, Times, Serif;
  font-weight:normal;
  text-transform:none;
  font-size:1.5em;
  display: block;
  text-align: center;
}

#content span {
  position: relative;
  top: -20px;
  display: inline-block;
  padding-left:10px;
  padding-right:10px;
  background: lightgrey;
}

<div id="container">
   <div id="content"><span>Example</span></div>
</div>

Answer 3

Answer №2

Made some adjustments to your code and now the text has padding, so you'll need to use the innerWidth() function to calculate the width of the text including the padding. Hope this explanation clears things up for you :)

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>

Answer 4

Made some adjustments to your code and now the text has padding, so you'll need to use the innerWidth() function to calculate the width of the text including the padding. Hope this explanation clears things up for you :)

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>

Answer 5

Answer №3

Modify your calculation like so:

var horAlign = wrapperWidth / 2 - textWidth / 2;

Additionally, remove the padding property as it interferes with alignment.

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 6

Modify your calculation like so:

var horAlign = wrapperWidth / 2 - textWidth / 2;

Additionally, remove the padding property as it interferes with alignment.

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 7

Answer №4

The crucial aspect you overlooked is the necessity to divide textWidth by 2:

var horAlign = wrapperWidth/2 - textWidth/2; // Make sure to update your code accordingly.

Answer 8

The crucial aspect you overlooked is the necessity to divide textWidth by 2:

var horAlign = wrapperWidth/2 - textWidth/2; // Make sure to update your code accordingly.

Answer 9

Answer №5

Here is a suggestion for achieving the desired outcome:

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

Don't forget to account for the padding! Consider assigning a value to the variable 'padding' as well.

Answer 10

Here is a suggestion for achieving the desired outcome:

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

Don't forget to account for the padding! Consider assigning a value to the variable 'padding' as well.

Answer 11

Answer №6

width() allows you to get the width without considering the padding. Therefore, it is important to adjust your calculations to take padding into account as well:

Additionally, the formula for center aligning would need to be adjusted.

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>

Answer 12

width() allows you to get the width without considering the padding. Therefore, it is important to adjust your calculations to take padding into account as well:

Additionally, the formula for center aligning would need to be adjusted.

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>

The horizontal alignment of a jQuery div is off-center

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Creating a line chart with multiple axes using Chart.js by importing data from a Google Sheet in JSON format

Ways to guide users through a single-page website using the URL bar

Is the execution of renderer.render() synchronous or asynchronous?

Methods for presenting text from an object array using Angular

What is the method to execute a prototype function within another prototype?

Hexagonal design reminiscent of a beehive

jquery toggle not working on second click

Displaying a PDF file by clicking a button using AJAX

Failure to pass a variable declared within a function to another JavaScript file running simultaneously

Async reaction in MobX is a powerful tool for handling

Change a camelCase string to ALL_CAPS while adding underscores in JavaScript

Controlling HTML components without using the runat="server" attribute

Should buttons be wrapped based on the text of the link?

Problems with radio button serialization in jQuery form plugin

Tips on implementing ng-template within an Angular application

How can I forward a post request to a different URL in a node.js application?

Attempting to proceed to the next prompt in the questioning sequence based on the user's choice

The process of verifying email addresses using Angular 5

What is the best way to align the logo image in the center of the header vertically?

What is the best way to make my <div> element expand to fill the entire width of the screen? I attempted setting the width to 100%, but it didn