html - 垂直文本在内联和外部 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;}

输出

working fiddle

Answer 1

只需为图标(跨度)添加“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。