'禮' 的文本未對齊如預期

Question

CSS代碼：

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

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

我怎樣才能讓文字對齊我的子彈？目前，我得到這個：

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>