个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我试图让我的 li 元素在中间垂直对齐。
但看起来 vertical-align 不起作用。有什么想法吗？
HTML
<body>
<div class="toolbar">
<ul>
<li>
<input type="radio" value="one" name="try" />
<img src="try1_30X30.png"/>
hello
</li>
<li>
<input type="radio" value="two" name="try" />
<img src="try2_30X30.png"/>
world
</li>
</ul>
</div>
</body>
CSS
.toolbar ul {
list-style-type: none;
height: 50px;
}
.toolbar ul li {
float: left;
display: block;
line-height: 50px;
padding-left: 10px;
vertical-align: middle;
}
最佳答案
尝试将 vertical-align 属性应用于 img 标签本身。
请参阅下面的代码或此处的工作示例 (http://jsbin.com/oxoMeCo/1/)
<html>
<head>
<style type="text/css">
.toolbar ul {
list-style-type: none;
height: 50px;
}
.toolbar ul li
{
float: left;
display: block;
line-height: 50px;
padding-left: 10px;
}
.toolbar ul li img {
vertical-align:middle;
}
</style>
</head>
<body>
<div class="toolbar">
<ul>
<li>
<input type="radio" value="one" name="try" />
<img src="http://placehold.it/30x30">
hello
</li>
<li>
<input type="radio" value="two" name="try" />
<img src="http://placehold.it/30x30">
world
</li>
</ul>
</div>
</body>
</html>
关于css - 垂直对齐不适用于 li，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19127345/
25
4
0
我是一名优秀的程序员,十分优秀！