如何将数字放入滑块的圆圈内？

Question

我想制作一个滑块并放置一些按钮，让您可以在其下方的幻灯片之间切换。这些按钮的中心应该有一个数字。但是，数字显示在按钮的右下角。我该如何解决这个问题？

.slider-container {
  margin: auto;
  background-color: white;
  width: 1200px;
}

ul, li {
  margin: 0;
  padding: 0px;
}

ul.slider {
  position: relative;
  width: 1200px;
  height: 450px;
}

ul.slider li {
  position: absolute;
  width: inherit;
  height: inherit;
  transition: opacity .5s;
  opacity: 0;
}

ul.slider li img {
  width: 100%;
  height: 450px;
  object-fit: cover;
}

ul.slider li:first-child {
  opacity: 1;
}

.slider-menu {
  text-align: center;
  margin: 5px;
}  

.slider-menu li{
  text-align: center;
  display: inline-block
}

.slider-menu li a{
  text-align: center;
  padding: .5em;
  background-color: rgb(143, 129, 129);
  border-radius: 100%;
  display: inline-block;
  color: white;
  padding: 10px;
  width: 20px;
  height: 20px;
  font-size: 20px;
}

<div class="slider-container">
  <ul class="slider">
      <li id="slide1">
        <img src="images/slide1.jpg" alt="">
      </li>
      <li id="slide2">
        <img src="images/slide2.jpg" alt="">
      </li>
      <li id="slide3">
        <img src="images/slide3.jpg" alt="">
      </li>
  </ul>
  <ul class="slider-menu">
    <li>
      <a href="#slide1">1</a>
    </li>
    <li>
      <a href="#slide2">2</a>
    </li>
    <li>
      <a href="#slide3">3</a>
    </li>
  </ul>
</div>

Answer 1

将 line-height: 0; 添加到 .slider-menu li a 样式可以帮助您做到这一点