Daniel Daniel - 1 year ago 36
HTML Question

How to add html code for symbol and not have it count that symbol when centering text?

In the code below I am running into a problem in my weather application where things are not lining up because the degrees symbol is making the numbers appear slightly off center because it is counting the degree symbol as text. It gives all the numbers the slight appearance of being off. I've tried a couple of different ways but can anyone give me a tip on how I can get the html symbol on the same line without throwing off my text centering?

<div class="row">

<div class="panel panel-default col-md-3 plate">
<div class="panel-heading">
<h3 class="panel-title text-center"><?php echo $_SESSION['date1']; ?></h3>
<div class="panel-body">
<h1 class="main-temp"><div class="text-center"><?php echo $_SESSION['dayTemp1'] . '&#176;'; ?>
<img class="img-responsive center-block" src="img/1.png">
<h3 class="text-center main-weather"><?php echo $_SESSION['weather1']; ?></h3>
<div class="row">
<h3 class="col-md-4 text-center main-min">Min</h3>
<h4 class="col-md-4 text-center main-humidity">Humidity</h4>
<h3 class="col-md-4 text-center main-max">Max</h3>
<div class="row">
<h3 class="col-md-4 text-center main-min-value"><?php echo $_SESSION['minTemp1'] . '&#176;'; ?></h3>
<h4 class="col-md-4 text-center main-humidity-value"><?php echo $_SESSION['humidity1'] . '%'; ?></h4>
<h3 class="col-md-4 text-center main-max-value"><?php echo $_SESSION['maxTemp1'] . '&#176;'; ?></h3>

Answer Source

You can relative position it over by the width of the degree symbol.

#containerDiv {
  width: 100%;
  text-align: center;
  border: 1em solid #000;

#centeredTemp {
  position: relative;
  left: .5em;
  font-size: 4em;
<div id="containerDiv">
  <p id="centeredTemp">73&deg;</p>