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>

Solution 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

Solution 2

Try this:

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

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

Solution 3

This is what I used, it centers on both the bullet & the content

Jsfiddle: http://jsfiddle.net/VR2hP/14/

CSS:

ul {
  padding-left: 5em;
  list-style: none;
}

li.twitter::before,
li.fb::before {    
  font-family: 'FontAwesome';
  margin: 0 .2em 0 -1.5em;
  font-size: 3em;
  vertical-align: middle;
}

li.twitter::before {
  content: '\f081';
}

li.fb::before {
    content: '\f082';
}

li {
  list-style-type: none;
}

li span {
  display: inline-block;
  vertical-align: middle;
}

Solution 4

Use an unordered list and display the list items as tables.

Take a look at this example: https://jsfiddle.net/luenib/jw1ua38v/

The icon, number, or whatever you want to place is going to be located inside a span. The content of the span is centered horizontally and vertically, very useful if you don't want to display your icon on the top. The text inside the paragraph will keep a space to its left, so it won't go under the icon in case the text extends in more than one line.

CSS:

ul {
  padding-left: 0;
}

li {
  display: table;
}

li span {
  width: 40px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

HTML:

<ul>
  <li><span>1</span>
    <p>Some text here. Some text here. Some text here. Some text here. Some text here. Some text here.</p>
  </li>
  <li><span>2</span>
    <p>Some text here. Some text here. Some text here.</p>
  </li>
</ul>

View more solutions

Comments

[Jason]

Alt+0149 or just copy and paste it from my post. Alt codes

[Sly_cardinal]

Great answer, I like the use of the icon fonts and it has good browser support (tested in IE8+).