vertical text align inside LI error both in inline and external css

Question

am trying to aling text in middle in vertical

• i used both inline and external css but i could find any positive result i don't know whats wrong is going on and can't find the error

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

output

working fiddle

Answer 1

I cleaned up your code, you should never have anything other than an li element as a child of a list.

JSFiddle

EDIT: If you don't like the vertical spacing of the icon, just play with the top attribute in #left ul li a span . I was just checking it and I think I like 11px better.

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

just add "vertical-align: middle" for icon(span) - jsFiddle

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

but! your html wrong. correct structure:

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

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

And better to use classes instead of id.

Answer 3

Are any of your li elements going to have more than one line of text? If not, you can do this simply by setting the line-height of the li equal to the 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