0

他の多くのdivを含むコンテナdivがあり、divの1つに検索バーがあります。したがって、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 に答える