csshtmldreamweaver

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

I've been stuck on this for a while. Please see image attached. I need to make a circle with a centered letter inside it and a line to text aligned centre to the circle. I need help with rest of the code. 

.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>

enter image description here

Solution

  • How about this: 

    .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>