Question

在下面的代码中，我在天气应用程序中遇到问题，因为度数符号使得数字看起来略微偏离中心，因为它将度数符号计为文本。它为所有数字提供了关闭的轻微外观。我尝试了几种不同的方法，但是任何人都可以给我一个提示，告诉我如何在不丢弃文本居中的情况下将html符号放在同一行上？

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

Answer 1

你可以这样做，使用具有绝对位置的伪元素。

div {
  text-align: center;
  font-size: 20px;
  width: 200px;
  background: lightgray;
}
span {
  position: relative;
}
span:after {
  position: absolute;
  content: ' °';
}

<div>
  <span>123</span>
</div>

Answer 2

您可以通过度数符号的宽度将其相对定位。

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

如何为符号添加html代码，并且在居中文本时不计算该符号？

2 个答案: