有以下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'), array('id'=>'add-vacancy', 'class'=>'button-style')) ?>
<?php echo CHtml::link('Button 2', array('add'), array('id'=>'add-vacancy', 'class'=>'button-style')) ?>
</div>
</div>
我想垂直对齐“search”div中的输入文本字段。我该怎么做?提前致谢。
答案 0 :(得分:1)
最佳和最兼容方式是使用margin-top。
例如:
<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>
PS:垂直对齐:中间在Internet Explorer中不起作用。
答案 1 :(得分:0)
使用display:table-cell
搜索div
h2{
margin:0;
padding:0;
}
#search{
border:red solid 1px;
height:150px;
display:table-cell;
width:100%;
vertical-align:middle
}
<强> DEMO 强>