Vertically align smaller bullets with larger text

Question

I have a list with bullets. I made the bullets smaller by putting the li text inside a span and making the font-size of the li smaller than that of the span. The problem is that now the bullets are not vertically aligned in relation to the text. How do I fix that?

jsFiddle: http://jsfiddle.net/tXzcA/

li {
  font-size: 15px;
}

li span {
  font-size: 25px;
}

<ul>
  <li><span>text1</span></li>
  <li><span>text2</span></li>
  <li><span>text3</span></li>
  <li><span>text4</span></li>
</ul>

Answer 1

You could just make your own bullet point and make it whatever size you want.

li{   font-size: 15px;   list-style-type:none;  } li span{   font-size: 25px; }  ul li:before {    content: "•";    font-size: 80%;    padding-right: 10px; } 

Just change around the font-size to the size you want.

jsFiddle

Answer 2

Try this:

li span{
  font-size: 25px;
  vertical-align:middle;
  padding-bottom:5px;
}

See it here: http://jsfiddle.net/tXzcA/19/