垂直文本在行內和外部CSS中的LI錯誤內對齊

Question

正在嘗試將垂直中間的文字

• 我同時使用了內聯和外部CSS，但是我可以找到任何積極的結果，我不知道發生了什么問題，也找不到錯誤

   <div id="leftmenu"> <ul id="leftmenuidfrmslt" style="vertical-align: middle;"> <a href="#"><li><span class="flaticon-smart"></span>Item one</li></a> <a href="#"><li>Item two</li></a> <a href="#"><li>Item four</li></a> <a href="#"><li>Item five</li></a> </ul> </div> 

的CSS

span{color:green;font-size:30px;}
#leftmenu{margin-left:100px;}
#leftmenuidfrmslt
{
padding-left: 0;
margin-left: 0;
border-bottom: 1px dotted gray;
width: 300px;
}

#leftmenuidfrmslt li
{
vertical-align: middle;
text-align: center;
list-style: none;
margin: 0;
padding: 0.25em;
border-top: 1px dotted gray;
height:45px;
}
#leftmenuidfrmslt li:hover{background-color:#ffffcc;}
a{text-decoration:none;}

輸出

工作小提琴

Answer 1

我清理了您的代碼，除了li元素作為列表的子元素之外，您不應有其他任何東西。

JSFiddle

編輯：如果您不喜歡圖標的垂直間距，只需在#left ul li a span玩top屬性。 我只是在檢查它，我想我更喜歡11px。

CSS：

#left ul {
    margin:0;
    padding:0;
    width:300px;
    border-top:1px dotted gray;
}

#left ul li {
    margin:0;
    padding:0;
    list-style-type:none;
    text-align:center;
    border-bottom:1px dotted gray;
    border-collapse:collapsed;
}

#left ul li a {
    display: block;
    height:45px;
    vertical-align: center;
    line-height:45px;
}

#left ul li a span {
    position:relative;
    color:green;
    top: 8px;
    font-size: 30px;
    line-height: 15px;
}

#left ul li a:hover {
    background-color:#FFC;
    text-decoration:none;
}

HTML：

<div id="left">
    <ul>
        <li><a href="#"><span class="glyphicon glyphicon-search"></span>Item one</a></li>
        <li><a href="#">Item two</a></li>
        <li><a href="#">Item three</a></li>
        <li><a href="#">Item four</a></li>
        <li><a href="#">Item five</a></li>
   </ul>
</div>

Answer 2

只需為圖標（跨度）添加“ vertical-align：middle” -jsFiddle

#leftmenuidfrmslt li span{
    vertical-align: middle;
}

但！ 您的html錯誤。 正確的結構：

<div id="leftmenu">
    <ul id="leftmenuidfrmslt">
     <li><a href="#"><span class="glyphicon glyphicon-search"></span>Item one</a></li>
     <li><a href="#">Item</a></li>
     <li><a href="#">Item</a></li>
     <li><a href="#">Item</a></li>
    </ul>
</div>

和CSS

a {
    text-decoration:none;
}
#leftmenu {
    margin-left:100px;
}
#leftmenuidfrmslt {
    padding-left: 0;
    margin-left: 0;
    border-bottom: 1px dotted gray;
    width: 300px;
}
#leftmenuidfrmslt li {
    text-align: center;
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px dotted gray;
    height:45px;
    line-height:45px;
}
#leftmenuidfrmslt li span {
    vertical-align: middle;
    color:green;
    font-size:30px;
}
#leftmenuidfrmslt li:hover {
    background-color:#ffffcc;
}

最好使用類而不是id。

Answer 3

您的li元素中是否有不止一行文字？ 如果不是，則只需將li的line-height設置為height 。

#leftmenuidfrmslt li {
    text-align: center;
    list-style: none;
    margin: 0;
    padding: 0.25em;
    border-top: 1px dotted gray;
    height:45px;
    line-height:45px;
}

JSFiddle