[英]vertical text align inside LI error both in inline and external css
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 我同时使用了内联和外部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>
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;}
I cleaned up your code, you should never have anything other than an li
element as a child of a list. 我清理了您的代码,除了
li
元素作为列表的子元素之外,您不应有其他任何东西。
EDIT: If you don't like the vertical spacing of the icon, just play with the top
attribute in #left ul li a span
. 编辑:如果您不喜欢图标的垂直间距,只需在
#left ul li a span
玩top
属性。 I was just checking it and I think I like 11px better. 我只是在检查它,我想我更喜欢11px。
CSS: 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: 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>
just add "vertical-align: middle" for icon(span) - jsFiddle 只需为图标(跨度)添加“ vertical-align:middle” -jsFiddle
#leftmenuidfrmslt li span{
vertical-align: middle;
}
but! 但! your html wrong.
您的html错误。 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 和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. 最好使用类而不是id。
Are any of your li
elements going to have more than one line of text? 您的
li
元素中是否有不止一行文字? If not, you can do this simply by setting the line-height
of the li
equal to the height
. 如果不是,则只需将
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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.