61,112
社区成员
发帖
与我相关
我的任务
分享如何让
<style type="text/css">
li{height:30px; line-height:30px;}
</style>
<li><input type="text" /></li>
这里input是居顶显示的，而不是居中，怎么让input居中呢？
...全文
请发表友善的回复…
发表回复
Jackie_GP 2011-07-28
- 打赏
- 举报
[Quote=引用 7 楼 lxh060204 的回复:]
其实有一个方法：
<html>
<head>
<style type="text/css">
li{height:40px; line-height:40px; background:yellow;}
li span{display:inline-block;}
</style>
</head>
<body>
<li><span> </span><input t……
[/Quote]
我试试
其实有一个方法：
<html>
<head>
<style type="text/css">
li{height:40px; line-height:40px; background:yellow;}
li span{display:inline-block;}
</style>
</head>
<body>
<li><span> </span><input t……
[/Quote]
我试试
JJYY0088 2011-02-25
- 打赏
- 举报
<span> </span> 多了一个> 去掉吧
JJYY0088 2011-02-25
- 打赏
- 举报
注意span标记的设置
JJYY0088 2011-02-25
- 打赏
- 举报
其实有一个方法：
<html>
<head>
<style type="text/css">
li{height:40px; line-height:40px; background:yellow;}
li span{display:inline-block;}
</style>
</head>
<body>
<li><span> </span><input type="text" /></li>
</body>
</html>
<html>
<head>
<style type="text/css">
li{height:40px; line-height:40px; background:yellow;}
li span{display:inline-block;}
</style>
</head>
<body>
<li><span> </span><input type="text" /></li>
</body>
</html>
emcob 2011-02-24
- 打赏
- 举报
可以用margin或padding实现了，或者把li定义display:table-cell; vertical-align:middle
不过你要考虑ie6的话就不要了
不过你要考虑ie6的话就不要了
马老虎 2011-02-24
- 打赏
- 举报
[Quote=引用 4 楼 athrunzero 的回复:]
个人觉得能用margin-top的就用margin-top
[/Quote]
margin-top 或者 pedding
个人觉得能用margin-top的就用margin-top
[/Quote]
margin-top 或者 pedding
athrunzero 2011-02-24
- 打赏
- 举报
个人觉得能用margin-top的就用margin-top
athrunzero 2011-02-24
- 打赏
- 举报
LZ是想要这样的效果么？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
* { margin:0; padding:0;}
li { list-style:none;}
.wrap { width:500px; height:60px; margin:0 auto; border:1px solid blue; overflow:hidden; position:relative; display:table-cell; vertical-align:middle;}
input { position:static; +position:relative; top:50%; *top:30%; width:100px;}
</style>
</head>
<body>
<div class="wrap">
<ul>
<li><input type="text" /></li>
</ul>
</div>
</body>
</html>
bhbhxy 2011-02-24
- 打赏
- 举报
在div里表单元素没有垂直居中的办法，除非改用table来实现,但是hack方法可以实现，不过会造成代码冗余难于维护，不推荐使用。如果不是特殊要求，可以用margin-top的方式来让input处于比较居中的位置
lpbottle 2011-02-24
- 打赏
- 举报
Why？难道这个问题真的是简单到各位都不愿回答了？还是我自己提问的这个问题本身就是个问题？虽然可以换过一种形式来实现，但我更想知道这个问题的解法
