如何垂直对齐div中的输入文本字段?

时间:2013-05-21 10:27:29

标签: 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'), 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中的输入文本字段。我该怎么做?提前致谢。

2 个答案:

答案 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