Html 如何垂直对齐div中的输入文本字段？
有以下HTML代码：Html 如何垂直对齐div中的输入文本字段？,html,css,Html,Css,有以下HTML代码： <div id="top"> <div id="search"><h2 id="title">Tasks</h2><input type="text" id="key-words-search"/></div> <div id="controls"> <?php echo CHtml::link('Button 1', array('add'), arr
<div id="top">
<div id="search"><h2 id="title">Tasks</h2><input type="text" id="key-words-search"/></div>
<div id="controls">
<?php echo CHtml::link('Button 1', array('add'), array('id'=>'add-vacancy', 'class'=>'button-style')) ?>
<?php echo CHtml::link('Button 2', array('add'), array('id'=>'add-vacancy', 'class'=>'button-style')) ?>
</div>
</div>
任务
我想垂直对齐“搜索”div中的输入文本字段。我怎么做？提前谢谢 使用
display:table cellh2{
margin:0;
padding:0;
}
#search{
border:red solid 1px;
height:150px;
display:table-cell;
width:100%;
vertical-align:middle
}
最佳且最兼容的方法是使用边距顶部。
例如：
输入{
高度：50px；
边缘顶部：25px；
}
div{
高度：100px；
边框：1px实心#f00；
}
PS:Vertical align:middle在Internet Explorer中不起作用。垂直对齐：middle的可能副本在Internet Explorer中不起作用。
<html>
<head>
<style type="text/css">
input {
height:50px;
margin-top:25px;
}
div {
height:100px;
border:1px solid #f00;
}
</style>
</head>
<body>
<div>
<input type="text" />
</div>
</body>
</html>