Вопрос по list, vertical-alignment, font-size, css – Выровняйте вертикальные маркеры с большим текстом

16

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

HTML:


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

CSS:

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

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

Ваш Ответ

4   ответа
7

азмера, который вы хотите.

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

Это сработало, когда я использовалcontent: "\2022" dmr
Alt + 0149 или просто скопируйте и вставьте его из моего поста.Альтернативные коды Jason
9

Попробуй это:

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

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

5

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;
}
Отличный ответ, мне нравится использование значков шрифтов, и он имеет хорошую поддержку браузера (проверено в IE8 +). Sly_cardinal
2

е таблиц.

Взгляните на этот пример: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>

Похожие вопросы