＆＃39;利＆＃39;文本未按预期对齐

Question

CSS代码：

＆＃13;

＆＃13;

ul {
    list-style: none;
    padding:0;
    margin:0;
}

li { 
    padding-left: 1em; 
    text-indent: -.7em;
}

li:before {
    content: "• ";
    color: #28B779; /* or whatever color you prefer */
    font-size:2em;
}

＆＃13;

<ul>
  <li>English</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

如何让文字对齐我的子弹？目前我得到了这个：

Answer 1

^{发表评论作为答案..}

只需将vertical-align: middle添加到伪元素。

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
li {
  padding-left: 1em;
  text-indent: -.7em;
}
li:before {
  content: "• ";
  color: #28B779;
  /* or whatever color you prefer */
  font-size: 2em;
  vertical-align: middle;
}

<ul>
  <li>English</li>
</ul>

Answer 2

要完美地对齐它们，您需要使用vertical-align: middle设置文本和伪元素的样式。由于CSS选择器无法选择文本，因此您需要将其包装在一个附加元素中：

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
li {
  padding-left: 1em;
  text-indent: -.7em;
}
li:before {
  content: "• ";
  color: #28B779;
  font-size: 2em;
}
li:before, li > span {
  vertical-align: middle;
}

<ul>
  <li><span>English</span></li>
</ul>