Вертикально выровнять меньшие пуль с большим текстом

У меня есть список с пулями. Я сделал пули меньше, поместив текст li внутри span и уменьшив размер шрифта li меньше, чем у span. Проблема в том, что теперь пули не выравниваются по вертикали относительно текста. Как это исправить?

HTML:

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

CSS

li{
    font-size: 15px;
}
li span{
    font-size: 25px;
}

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

Ответ 1

Вы можете просто создать свою собственную маркерную точку и сделать ее независимо от того, какой размер вы хотите.

li{
  font-size: 15px;
  list-style-type:none;

}
li span{
  font-size: 25px;
}

ul li:before {
   content: "•";
   font-size: 80%;
   padding-right: 10px;
}

Просто измените размер font-size на нужный размер.

jsFiddle

Ответ 2

Попробуйте следующее:

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

Смотрите здесь: http://jsfiddle.net/tXzcA/19/

Ответ 3

Это то, что я использовал, в центре внимания как пуля и содержание

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;
}

Ответ 4

Используйте неупорядоченный список и отображайте элементы списка в виде таблиц.

Посмотрите на этот пример: https://jsfiddle.net/luenib/jw1ua38v/

Значок, номер или все, что вы хотите разместить, будет расположен внутри пролета. Содержимое диапазона располагается по горизонтали и вертикали, что очень полезно, если вы не хотите, чтобы ваш значок отображался сверху. Текст внутри абзаца будет оставаться слева от него, поэтому он не будет отображаться под значком, если текст занимает более одной строки.

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>