61,112
社区成员
发帖
与我相关
我的任务
分享单行排列中如何让input，img完美垂直居中显示？
单行排列中如何让input，img完美垂直居中显示？
demo地址：
垂直居中
demo地址：
垂直居中
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>完美的水平垂直居中！！--兼容ie6，ie7，ff，opera，safari的水平垂直居中</title>
<style media="screen" type="text/css">
/*
分两套看
holder的 display:table
holder div的 display:table-cell; vertical-align:middle;
就可以实现在ff，safari和opera下的垂直居中，但是对ie系列无效
holder的 position:relative;
holder div的 *position:absolute; top:50%; left:0;
.holder p的 position: relative; top:-50%;
通过控制绝对层的位置实现ie6，7下的垂直居中
holder div中的*position:absolute是只给ie6和7看的css hack
对于水平居中要说的是如果holder div的width如果未指明100%，在ie7中它是不会自动延伸100%的，也就无法实现水平居中
*/
.holder{width:1000px; height:300px; display:table; position:relative; margin:12px auto; border:1px solid #596480; background:#ffc;}
.holder div{*position:absolute; top:50%; left:0; display:table-cell; vertical-align:middle; width:100%;}
.holder .good{position: relative; top:-50%; text-align:center; margin:0; padding:0;}
</style>
</head>
<body>
<div class="wrapper">
<div class="holder">
<div>
<p class="good"><img src="http://websky18.com/d/file/tptx/2010-03-04/d3b8649b3e4ee1f328623e3b1d8b2d22.jpg"/></p>
</div>
</div>
<div class="holder">
<div>
<span>我是文字</span>
<input value="我是输入框"/>
<button>按钮</button>
<p class="good"><img src="http://websky18.com/d/file/tptx/2010-03-04/d3b8649b3e4ee1f328623e3b1d8b2d22.jpg"/></p>
</div>
</div>
<div style="line-height:40px; background:#006633; font-size:14px; color:#FFFFFF; font-weight:bold; text-align:center;">
以上的图片垂直并且水平居中,您可以改变holder的height和width进行测试
</div>
</div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
走在风中 2010-05-28
- 打赏
- 举报
试一下这个吧。vertical-align:middle
辰岡墨竹 2010-04-03
- 打赏
- 举报
用浮动吧，一个左浮动，一个右浮动。设定好margin就差不多了。
fujiayi1984 2010-04-03
- 打赏
- 举报
position:static;
或者position：absolute； margin：auto；
或者position：absolute； margin：auto；
