如何将 <li> 上的圆圈中的字母居中

Question

我已经坚持了一段时间。请参阅所附图片。我需要制作一个圆圈，里面有一个居中的字母，还有一条文本线与圆圈中心对齐。我需要其他代码的帮助。

.lettercircle {
  font-family: Helvetica, sans-serif;
  background-color: #009cda;
  color: #fff;
  padding: 5px 12px;
  border-radius: 50%;
  font-size: 28px;
}
#div {
  width: 499px;
  height: 166px;
}

<div id="div">
  <ul>
    <li> <span>A</span>
      DREAMWEAVER
    </li>
    <li> <span>B</span>
      PHOTOSHOP
    </li>
  </ul>
</div>

Answer 1

我想你只是忘了将你的 class 添加到你的跨度中。

   .lettercircle {
     font-family: Helvetica, sans-serif;
     background-color: #009cda;
     color: #fff;
     padding: 5px 12px;
     border-radius: 50%;
     font-size: 28px;
   }
   #div {
     width: 499px;
     height: 166px;
   }

<div id="div">
  <ul>
    <li> <span class="lettercircle">A</span>
      DREAMWEAVER
    </li>
    <li> <span class="lettercircle">B</span>
      PHOTOSHOP
    </li>
  </ul>
</div>

Answer 2

这个怎么样：

.lettercircle {
  font-family: Helvetica, sans-serif;
  background-color: #333;
  color: #fff;
  padding: 5px 9px;
  border-radius: 50%;
  font-size: 12px;
  display: table-cell;
  vertical-align: middle;
}
.title {
  padding-left: 10px;
  display: table-cell;
  vertical-align: middle;
}
#div {
  width: 499px;
  background: red;
  height: 100%;
  padding: 10px;
}
#div > ul {
  padding: 0;
  display: table-cell;
  vertical-align: middle;
}
#div > ul > li {
  list-style: none;
  padding: 10px;
  font-family: Helvetica, sans-serif;
  text-transform: uppercase;
  display: table;
}

<div id="div">
  <ul>
    <li>
      <span class="lettercircle">A</span>  
      <span class="title">DREAMWEAVER</span>
    </li>
    <li> 
      <span class="lettercircle">B</span>  
      <span class="title">PHOTOSHOP</span> 
    </li>
  </ul>
</div>

如何将 <li> 上的圆圈中的字母居中

How to center a letter in a circle on a <li>

html

css

dreamweaver