[英]aligning image and text inline
html code: html代码:
<ul>
<li><a href=#>Upload</a></li>
<li><a href=#>christin Bayes</a></li>
<li><img src="image/john.jpg" height="30" width="30"></li>
<li><a href=#>SignOut</a></li>
</ul>
css: CSS:
ul li
{
margin-left: 15px;
display: inline;
list-style: none;
}
i want the list items(upload,name,signout) aligning middle exactly like in facebook. 我希望列表项(上载,名称,退出)完全像在Facebook中一样对齐中间。 plz suggest me 请给我建议
HMTL : HMTL :
<ul class="MenuBar">
<li><a href=#>Upload</a></li>
<li><a href=#>christin Bayes</a></li>
<li><img src="image/john.jpg" height="30" width="30" /></li>
<li><a href=#>SignOut</a></li>
</ul>
CSS : CSS :
.MenuBar
{
padding: 0px;
border: 1px solid #036;
font-size: 8pt;
height: 30px;
}
.MenuBar li
{
display: inline;
padding-left: 15px;
list-style:none;
height: 30px;
}
.MenuBar li img
{
vertical-align:middle;
}
Obviously you can choose to remove the border is only for testing. 显然,您可以选择删除仅用于测试的边框。
img {
vertical-align:middle;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.