0

我有一个容器 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 的任何建议。

4

2 回答 2

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;
}

这是一个演示

于 2012-12-24T04:09:58.423 回答
0

您可以使用position:relativefor#header-search使其位置相对于容器 div #header-middle

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

http://jsfiddle.net/rWNkj/

于 2012-12-23T05:52:06.493 回答