内联和外部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

我清理了您的代码，除了li元素之外，您不应该只有列表的子元素。

JSFiddle

编辑：如果您不喜欢图标的垂直间距，只需使用top中的#left ul li a span属性即可。我只是检查它，我认为我更喜欢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

只需为图标（span）添加“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个元素是否会包含多行文本？如果没有，您只需将line-height的{​​{1}}设置为等于li即可。

height

JSFiddle