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

Question

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>

Answer 1

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>

Answer 2

I think you just forgot to add your class to your spans.
.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>