Question

我有一个容器div，其中包含许多其他div，并且在其中一个div中有一个搜索栏。因此html看起来像这样：

   <div id="header-middle">
        <div id="header-search">
            <form>
                <input type="text">
            </form>
        </div>
        <div id="header-middle-left">
        </div>
        <div id="header-transition">
        </div>
        <div id="header-middle-right">
        </div>
    </div>

我拥有的css是：

#header-middle{
    width: 400px;
    height: 64px;
    float: left;
}

#header-search{
    position: absolute;
    left: 50%;
    top: 50%;    
    margin-top: -32px;
    margin-left: -200px;
}

#header-middle-left{
    width: 241px;
    height: 64px;
    float: left;
    background-image:url('foo');
    background-repeat:repeat-x;
}

#header-transition{
    width: 19px;
    height: 64px;
    float:left;
    background-image:url('foo2');
}

#header-middle-right{
    width: 140px;
    height: 64px;
    float:left;
    background-image:url('foo3');
    background-repeat:repeat-x;
}

div主要只是风格，他们使用图像作为背景，所以在搜索栏中没有任何伤害覆盖它们。但是，我需要将它放在包含div的中心，并覆盖其余部分的小部分。任何帮助将非常感激。此外，任何关于CSS的建议都将受到赞赏。

2 个答案:

答案 0 :(得分：1)

答案 1 :(得分：0)

Answer 1

您应该修改CSS以实现此目的，更改#header-middle和#header-search以使用以下代码：

#header-middle {
    width: 400px;
    height: 64px;
    position: relative;
}

#header-search {
    position: absolute;
    left: 50%;
    top: 50%;    
    margin-top: -11px;
    margin-left: -75px;
    width: 150px;
    height: 22px;
}

这是DEMO。

Answer 2

您可以使用position:relative #header-search来确定相对于容器div #header-middle的位置。

对于居中，如果宽度和宽度可以使用精确的像素。搜索框和容器div的高度是静态的。这不是最好的方法，但应该有效。如果它们是动态的，你可以用javascript计算。

http://jsfiddle.net/rWNkj/

将搜索栏居中放在包含许多其他div的容器div中

2 个答案: