将李子弹对齐文本？

Question

我使用列表项目符号的自定义字体和列表内容的普通字体，但由于项目符号的字体较大，因此它们的项目不会水平对齐。我会喜欢任何建议。

@font-face {font-family: altus_extras; src: url('http://localhost:8888/azaleamountain.org/wp-content/fonts/altus_extras.otf');}

.altus li::before { font-family: altus_extras !important; font-size: 6em; content: "/"; }

ul li {list-style-type: none !important;}

<ul class="altus">
<li> Is this a nice bullet?</li>
<li> Is this another nice bullet?</li>
</ul>

Answer 1

尝试这样的事情。使用等于父元素的font-size或高度的line-height以及vertical-align：middle，将有助于垂直居中星号。

＆＃13;

＆＃13;

li { 
  list-style-type: none;
  position: relative;
  padding-left: 20px;/* space enough to accommodate asterisk size */
  font-weight: 24px;
  
  }


li:after {
  content: '*';
  position: absolute;
  line-height: 24px;
  vertical-align: middle;
  left: 0;
  font-weight: bold;
  font-family: altus_extras; /* Your custom font */
  font-size: 2em;
  }

＆＃13;

<ul class="altus">
<li> Is this a nice bullet?</li>
<li> Is this another nice bullet?</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

有3-4种方法可以完成任务：

1. 放置位置：绝对然后调整顶部，左侧位置并将填充左侧放在li上以放置子弹空间和位置：相对于li以对齐::之前使用它。
2. 只放置位置：相对于::之前然后放置顶部：5px或7px根据需要。
3. 放置转换：翻译（0px，7px）on :: before
4. 使用行高和字体大小播放